React useState with state that updates based on props

user_5917342 0
Viewed 566

I have a functional React component that roughly looks like this:

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)  

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}

This obviously doesn't work because React only computes the initial state part once, so myState isn't updated on prop1 change.

Is there a way to make this work without using useReducer? Is this a good use case for useEffect?

use-state react-hooks reactjs frontend javascript
3 Answers

This is because state is only initialized once. That's why the second value returned from useState() is a setter function. It's intended to be the only way to update the state after initialization. In this case you would use a useEffect() hook to update the state when props change (although there's not generally a great reason to initialize state with a prop).

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)

  useEffect(() => {
    setState(prop1)
  }, [prop1])

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}
user_84466420

To update myState on prop1 change, pass a second argument to useEffect that is the array of values that the effect depends on.

An example looks like this:

const MyComponent = ({ prop1 }) => {
  const [myState, setState] = useState(prop1);

  useEffect(() => {
    setState(prop1);
  }, [prop1]);

  return (
    <>
      {myState && <div>Some text...</div>}
      <div onClick={() => setState(true)}>Click me</div>
    </>
  );
};
user_106496180

useState(initialValue) will only use initialValue on the first render and does not change after re-renders. So you need to write your code like this:

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)

  useEffect(() => {
    setState(prop1)
  }, [prop1])

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}
user_164200180
Related