React Anti-Patterns: Props In Initial State

Knowing best practises is always valuable, but sometimes more important is being aware of anti-patterns. By familiarizing ourselves with anti-patterns, we not only steer clear of common traps but also build a deeper understanding of what we code.

In React, “props” (short for “properties”) are a mechanism for passing data from a parent component to a child component. Props are read-only, meaning that they cannot be modified by the child component that receives them. However, they can be used to define initial state of the child component. It looks innocent, but it may lead to lack of clarity.

In general, when this approach is not implemented correctly, it can lead to two problems:

• we have duplicated source of truth — props from the parent component and state from the child component.
• if the props passed to the child component changes, the state in the child component does not get updated.

Example

Let’s see an example:

function ChildComponent(props) {
  const [inputNumber, setInputNumber] = useState(props.number);

  const inputChangedHandler = (event) => {
    setInputNumber(event.target.value);
  };
  
  return (
    <div>
      <input type='number' onChange={inputChangedHandler} />
      <p>Input number: {inputNumber}</p>
    </div>
  );
}

function ParentComponent() {
  const [randomNumber, setRandomNumber] = useState(0);
  
  const clickedHandler = (event) => {
    setRandomNumber(Math.round(Math.random(0,100)*1000));
  };

  return (
    <div>
      <button onClick={clickedHandler}>
        Generate Random Number
      </button>
      <p>Random number: {randomNumber}</p>
      {
        randomNumber >= 500 && <ChildComponent number={randomNumber} />
      }
    </div>
  );
}

Run the code

You can run this code in the sandbox:

How it works?

When you click the “Generate Random Number” button in the ParentComponent, it generates a random integer between 0 and 1000 and updates the randomNumber state.

If randomNumber is 500 or greater, the ChildComponent is displayed, and it sets its inputNumber state to the value of randomNumber when it first renders. However, any subsequent changes to randomNumber in the ParentComponent won't automatically affect the inputNumber in the ChildComponent.

Initial value of the state is only used during the first rendering of the component. If you destroy and recreate the ChildComponent, then the initial props will be used again. This means that props used to initialize state are only applied once, and after that, state and props are separate.

Conclusion

In this article, we learned why using props as initial state is considered an anti pattern. Overall, there are two rules to follow:

• pass only those props, for which you are sure that they will not change in the future.
• if you cannot avoid changing of props, give it explicit name eg. initalValue, that makes your intention clear.