React props vs state - Differences and Design Patterns

1. React state
2. React props
3. Connection Between state and props in React
4. When to Use state vs props in React

React is one of the easiest JavaScript frameworks to learn. However, this library introduces a few concepts that may seem confusing at first. For instance, many newbies have difficulty understanding the difference between props and state. In this article, you’ll learn why both of these objects are necessary and how to find the best use for them.

React state

The concept of state is not unique to React or other JavaScript frameworks that utilize it. Even some applications built with vanilla JavaScript can have a state. In React, the concept is a little different but based on the same principle.

Every React component maintains its local state object. The state management happens internally. The state object is mutable; mutating it is the key to developing dynamic React components that change in response to the user’s actions.

The parent component can not mutate the state of its children. You can think of state values as local variables in the plain JavaScript functions. These variables are limited to the function scope.

In React, the state object’s primary purpose is to simplify the maintenance of all the data that powers our dynamic applications. Any changes in the state object values are going to trigger a re-render of the component. This way, when the user input changes, the user’s view will always update instantly.

React props

props (short for properties) object is used to share parent components’ data with their children. You can think of props as the settings passed to the component to customize its behavior. Imagine you have a <Bargraph/> component that renders a visual. Such components require numbers to render a graph. Every graph renders different data, which can be fed into them via props. This is just one example of how props facilitate the component reusability.

Every component receives a props object, which is immutable within the component. However, just like you can pass different arguments to functions, many instances of the same component can receive different values via props.

Under the hood, React uses React.createElement() method to create React components and pass down the props. However, React developers tend to use more familiar JSX syntax to build React applications. This HTML-like syntax provides a more readable way to pass down the props :

const Graph=(props)=>
{
  return <div>
          <h1>{props.data.percentage}%</h1>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"}
    }
  }
  render() {
    return <Graph data={this.state.data}>Hi! Try edit me</Graph>;
  }
}

This is a fairly simple demonstration of how props work. First, we define a child component. As you can see, the child component does not maintain its state. It only reads the data passed to it via the props.

Next, we have a parent component. Unlike the child component, it uses the data from its state object to pass it down as a prop. As you can see, the JSX syntax is not the same as regular HTML.

React props Destructuring

As you can see in the example above, every functional component accepts a props argument. The data stored in the props object can be accessed by reading the property with the same name as the attribute in JSX.

A simpler way would be to destructure the props within the function definition. Here’s an example of a Graph functional component with destructured props:

const Graph=({data = { percentage: 50 } })=>
{
  return <div>
          <h1>{{data.percentage}}%</h1>
         </div>;
}

This allows you to use a simpler syntax and even set default prop values. If the child component doesn’t receive any props, the component can read the default value instead.

Connection Between state and props in React

As we previously mentioned, within the React component, the props object is strictly immutable. However, there’s one caveat: child components can mutate the state in the parent component, which is used as a source for data passed through the props back to the child. If this is hard to comprehend, let’s examine this code sample:

const Graph=(props)=>
{
  const {handler, color} = props
  return <div 
         style={{width: "400px", height: "400px", border: "2px solid black", backgroundColor: `${color}`}}>                     
         <h1>{props.data.percentage}%</h1>
         <input type="text" onChange={(e) => handler(e)}/>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"},
      bgColor: "black"
    }
  }
  render() {
    const backgroundHandler = (e) => this.setState({color: e.target.value})     
    return <Graph data={this.state.data} color={this.state.bgColor} handler={backgroundHandler}>
            Hi! Try edit me</Graph>;
  }
}

In this example, we still have the same two components we used before. We pass down an event handler via the props. Then we use the same handler to update the color property in the parent component’s state. Once the value in the parent component’s state has changed, it will re-render and pass down an updated color value back down to our child component.

This may seem like the child component updates its own props, but in this example, it actually uses the event handler passed via the props to update the source of its own props - the value of color property in the parent component’s state.

Here’s a link to playcode. Try it out for yourself - type in the color into the text field and see what happens.

This is a prime example of how properties and state are interconnected. The parent component’s state is usually the source of data passed down to all of its children via the props.

In our example, the state value stored in the bgColor state property becomes a color prop.

This example shows that state and props are just two ways to store the data and manage its flow.

When to Use state vs props in React

It’s not a choice of one or the other - it is common for components to maintain the state and receive props as well. Pieces of data stored in the state often become props for the children’s components. The props aren’t limited to data - they can also include callback functions.

To build a React app that is easy to manage, use the state for the components that are high in the component tree. All other components should be stateless and receive the necessary data through the props. Stateless components are preferred because they’re easier to read and test.

To sum up, both state and props are necessary, and props wouldn’t be as effective without the state. Generally, it’s better to use stateful components for event handling and data processing, whereas stateless components are better for visualization and formatting.