Bug: component is rendered before it should.

[jordease]

Hi,

I am a bit confused about the example below, where I expect the state to be set before a render.

const Component1 = () => {
    const [state, setState] = useState();
    return <Component2 state={state} setState={setState}/>
}

const Component2 = ({state, setState}) => {
    if(state === undefined)
        setState({title: 'Hello'});     // shouldnt this be set before the render? it works if the useState hook is on this component

    return <Component3 state={state}/>
}

const Component3 = ({state}) => {
    // throws an error
    return <p>{state.title.toString()}</p>
}

[joealden]

@jordease, setState is asynchronous, which means that Component3 throws an error because state hasn't yet been "set" to the value passed in Component2. The reasoning to why setState is asynchronous can be found here: #11527 (comment).

[billyjanitsch]

@joealden, that's not correct. When setState is called during render, the update is flushed before React descends into the subtree. For example, as @jordease's comment mentions, the following works correctly:

const Component1 = () => {
    const [state, setState] = useState();
    if(state === undefined) setState({title: 'Hello'});
    return <Component2 state={state} />
}

const Component2 = ({state}) => {
    return <p>{state.title.toString()}</p>
}

@jordease, the issue is that calling setState during render is only allowed in the special case where the state is owned by the component being rendered. Your snippet results in a console error explaining this:

Warning: Cannot update a component (Component1) while rendering a different component (Component2). To locate the bad setState() call inside Component2, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

If you need to update the state in a descendent component, it has to be in an effect or an event handler.

[bvaughn]

@billyjanitsch's comment looks correct. Thanks!

Going to close this issue.

[joealden]

@billyjanitsch thanks for correcting the record! I overlooked that last part of the code comment, and I learnt something new today about React! 😃

[jordease]

@billyjanitsch I tried using useEffect to solve this but it didn't work as well.

const Component1 = () => {
    const [state, setState] = useState();
    return <Component2 state={state} setState={setState}/>
}

const Component2 = ({state, setState}) => {
    useEffect(()=>{
        setState({title: 'Hello'})
    },[state])

    return <Component3 state={state}/>
}

const Component3 = ({state}) => {
    // throws an error
    return <p>{state.title.toString()}</p>
}

I guess the way to this to would be to update state manually for the same render so something like:

if(state === undefined){
state = {...state, title: 'Hello'}
//or directly
state.title = 'Hello'

setState({title: 'Hello'})
}

[joealden]

I tried using useEffect to solve this but it didn't work as well.

@jordease that is because useEffect calls run after render, meaning that state will still be undefined on initial render, hence why the error occurs in that case.

I guess the way to this to would be to update state manually for the same render so something like: [...]

@jordease I personally wouldn't advise doing this; why can you not just set a default state value in your case?

If you really can't set a default value where you define the state, I guess instead of manually mutating state as you've shown, you could create a "fallback" version of state in Component2 that you pass down to Component3 like so:

const Component1 = () => {
  const [state, setState] = useState();
  return <Component2 state={state} setState={setState} />;
};

const Component2 = ({ state, setState }) => {
  const stateFallback = { title: "Hello" };

  useEffect(() => {
    if (!state) setState(stateFallback);
  }, [state]);

  return <Component3 state={state ?? stateFallback} />;
};

const Component3 = ({ state }) => {
  return <p>{state.title.toString()}</p>;
};

[jordease]

Because in this case Component3 will be rendered 2 times... it is solvable though if I dont use setState() and simply use the default value.

Thanks for the help!