How does React.useState(<initialState>) update with <initialState> updates?

user_9294939 0
Viewed 52
function Count() {
  const [count, setCount] = React.useState(0)
  const [count2] = React.useState(count)

  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>+</button>
      <p>count: {count}</p> // does update
      <p>count 2: {count2}</p>. // does not update
    </div>
  )
}

Why does count2 not update when count updates after <button> is clicked?

I thought only lazy initialised states (e.g. React.useState(() => count)) are not updated on component re-renders.

use-state react-hooks reactjs
2 Answers

Create setCount2 to update count2 using a useEffect having dependency on count.

function Count() {
  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(count);

  useEffect(() => {
    setCount2(count);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>+</button>
      <p>count: {count}</p> 
      <p>count 2: {count2}</p>
    </div>
  );
}
user_76156230

I have a messy solution to your problem, Messy in terms that it could be improved but as of right now I cannot think of any better solutions than this.

  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(count);

  const changeStateForCount = () => {
    setCount(count + 1);
    setCount2(count + 1);
  };

  return (
    <div>
      <button onClick={changeStateForCount}>+</button>
      <p>count: {count}</p> {/* does update */}
      <p>count 2: {count2}</p>. {/* does not update */}
    </div>
  );
}

user_167205020
Related