React Controlled Component Doesn't Rerender/Update Like I Expect

Question

So, I was refactoring a React component after reading more about React principles of lifting state up and in particular after reading this about derived state.

I had a component like so (before the refactor) that was working but now I realize was duplicating state among multiple sources of truth (in the parent and the child):

const ChildComponent = ({
  prevStep,
  nextStep,
  parentStateData,
  updateParentStateData,
}) => {
  const [childState, updateChildState] = useState(
    parentStateData["thisChildData"]
  );

  const updateParentStateDataFromChild = () => {
    return updateParentStateData(
      Object.assign(parentStateData, { thisChildData: childState })
    );
  };

  useEffect(() => updateParentStateDataFromChild(), [childState]);

  return (
    <div className="text-center">
      <h1 className="step-title">Choose Child State</h1>
      <div class="state-size-buttons">
        <Button
          onClick={() => updateChildState(1)}
          active={childState === 1}
          className="mt-3"
          variant="light"
          size="lg"
        >
          1
        </Button>
        <Button
          onClick={() => updateChildState(2)}
          active={childState === 2}
          className="mt-3"
          variant="light"
          size="lg"
        >
          2
        </Button>
        <Button
          onClick={() => updateChildState(3)}
          active={childState === 3}
          className="mt-3"
          variant="light"
          size="lg"
        >
          3
        </Button>
      </div>
      <Button onClick={() => prevStep()} className="mr-2" variant="light">
        Go Back
      </Button>
      <Button disabled={!childState} onClick={() => nextStep()} variant="light">
        Next
      </Button>
    </div>
  );
};

Again, this worked but it's not good (I think) because it duplicates state. The ChildComponent receives the parent state (parentStateData) and an update function for that state (updateParentStateData) but duplicates that state in its own childState and updateChildState - which in turn updates the parent using a useEffect() hook -> when child state updates, update the parent state.

So, I started my refactor, like this:

const ChildComponent = ({
  prevStep,
  nextStep,
  parentStateData,
  updateParentStateData,
}) => {
  const updateState = (data) => {
    return updateParentStateData(
      Object.assign(parentStateData, { thisChildData: data })
    );
  };

  const nextDisabled = !parentStateData["thisChildData"];

  return (
    <div className="text-center">
      <h1 className="step-title">Choose A State</h1>
      <div class="state-size-buttons">
        <Button
          onClick={() => updateState(1)}
          active={parentStateData["thisChildData"] === 1}
          className="mt-3"
          variant="light"
          size="lg"
        >
          1
        </Button>
        <Button
          onClick={() => updateState(2)}
          active={parentStateData["thisChildData"] === 2}
          className="mt-3"
          variant="light"
          size="lg"
        >
          2
        </Button>
        <Button
          onClick={() => updateState(3)}
          active={parentStateData["thisChildData"] === 3}
          className="mt-3"
          variant="light"
          size="lg"
        >
          3
        </Button>
      </div>
      <Button onClick={() => prevStep()} className="mr-2" variant="light">
        Go Back
      </Button>
      <Button
        disabled={nextDisabled}
        onClick={() => nextStep()}
        variant="light"
      >
        Next
      </Button>
    </div>
  );
};

This time as you can see, there is no internal state and the parent state object simply gets updated at the relevant key using Object.assign().

But my problem is these state changes never get reflected in my view. If I do a React component inspector I see the state is changing (although it seems to lag) but the view doesn't change. Most critically, the nextDisabled constant and variants of that (I tried putting that logic directly into the Next button <Button disabled={nextDisabled} onClick={()=>nextStep()} variant="light">Next</Button>) don't ever change. So the parent state gets updated, but !parentStateData['thisChildData'] never changes value or never runs again... so what gets rerendered when the props (via the change in parentStateData) change? Why doesn't the simple validation on the next button work as I expect when I update the parent state? That is, once I select a number using the buttons (no longer 0 from the default) I would expect it to not be disabled (example: !1 is false - so not disabled as its for the disabled prop).

But it never changes!

It stays evaluated to true despite the state updating in the parent and therefore the props changing in the child. So somewhere I have a conceptual error. Any help here would be very much appreciated.

I think this is because you are returning the same object. Be careful of immutability. Try: return updateParentStateData( {...parentStateData, thisChildData: data } ); — Stéphane Veyret, Oct 10 '20 at 16:15
@StéphaneVeyret I dont' think so, that's what `Object.assign()` does, no? Returns a new object? — Summer Developer, Oct 10 '20 at 16:26
@Summer_Developer, no, `Object.assign()` returns the first given parameter, after assigning the given properties. — Stéphane Veyret, Oct 10 '20 at 16:28

Stéphane Veyret · Accepted Answer · 2020-10-10T16:32:16.237

1

React, and most of the tools working with it, are based on the fact that states are immutable. It means that if you want to update a state, you must not change values in the same object, but you need to provide a new object.

So, the following is an error, because it updates the value of the state:

  const updateState = (data) => {
    return updateParentStateData(
      Object.assign(parentStateData, { thisChildData: data })
    );
  };

Instead, you should create a new object, for example:

  const updateState = (data) => {
    return updateParentStateData(
      Object.assign({}, parentStateData, { thisChildData: data })
    );
  };

I think that your first example is working only because it really updates the child property.

edited Oct 10 '20 at 16:32

answered Oct 10 '20 at 16:27

Stéphane Veyret

1,791
1
8
15

I think this is wrong. This is what `Object.assign()` does. See this - https://stackoverflow.com/questions/32925460/object-spread-vs-object-assign – Summer Developer Oct 10 '20 at 16:28
1

Oh... or would I do it like this `Object.assign({},parentStateData,{ thisChildData: data })`? – Summer Developer Oct 10 '20 at 16:29
Look carefully to this question: the first given parameter of `Object.assign()` is a new empty object. This is not what you are doing. – Stéphane Veyret Oct 10 '20 at 16:30
Yes, you can do this. I will update my answer to use `assign`. – Stéphane Veyret Oct 10 '20 at 16:31

React Controlled Component Doesn't Rerender/Update Like I Expect

1 Answers1