Reading component state just after setting when using useState hook in react

Question

This console.log is not working: It'll just print the previous state value as set is async.

const SomeCompo = () => {
  const [count, set] = useState(0);
  const setFun = () => {
    console.log(count);
    set(count + 1);
    console.log(count);    
  }
  return <button onClick={setFun}>count: {count}</button>
}

I had to read the count in the render itself:

const SomeCompo = () => {
  const [count, set] = useState(0);
  console.log(count);
  const setFun = () => {
    set(count + 1);
  }
  return <button onClick={setFun}>count: {count}</button>
}

Is there a better way to read the value as I don't want to console for every render.

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Bergi, Apr 05 '21 at 20:37

ravibagul91 · Accepted Answer · 2019-09-22T08:17:55.007

9

You can use useEffect for this,

useEffect(() => {
   console.log(count);
}, [count]) //[count] is a dependency array, useEffect will run only when count changes.

edited Sep 22 '19 at 08:17

answered Sep 22 '19 at 08:12

ravibagul91

20,072
5
36
59

useeffect will also run when the component first renders. If you only want to print changes from the initial value use a useref. e.g.: `const renderCount = useRef(1);`, ` useEffect(() => { if (renderCount.current > 1 && broadcaster === true) console.log(count); renderCount.current = renderCount.current + 1; }, [count]);` – harry young Mar 06 '21 at 22:55

score 2 · Answer 2 · edited Sep 30 '19 at 09:23

2

I would suggest not to use setInterval. I would do something like useEffect. This function will be called each time you do a setState. Just like you had callback after setState. Pass the count state in the array, it will watch only for the count change in the state and console your count.

useEffect(() => {
 console.log(count);
}, [count]);

Also if you dont need to rerender your other components, you might wanan use useMemo and useCallback. https://www.youtube.com/watch?v=-Ls48dd-vJE

Here to more read: https://reactjs.org/docs/hooks-effect.html

edited Sep 30 '19 at 09:23

Asim K T

16,864
10
77
99

answered Sep 22 '19 at 08:15

Subhendu Kundu

3,618
6
26
57

I never thought of using useEffect like that. Haven't used hooks that much as of now. Can you explain why not to use setInterval? Any performance related issue? – Atin Singh Sep 22 '19 at 08:22

Alvaro · Answer 3 · 2019-09-22T08:24:48.510

0

The way to get a state value is to use useEffect and use the state as a dependency. This means that when we change a value the render cycle will finish and a new one will start, then useEffect will trigger:

useEffect( () => { console.log(value); }, [value] );

If you would need to read the value in the same cycle as it is changed a possibility could be to use the useState set function. This shows the latest value just before updating it:

setValue( latest_value => {
    const new_value = latest_value + 1;

    console.log(new_value);

    return new_value;
} );

edited Sep 22 '19 at 08:24

answered Sep 22 '19 at 08:12

Alvaro

9,247
8
49
76

`setValue( value => { console.log(value); return value + 1; } );` this will also print's the previous value only. – ravibagul91 Sep 22 '19 at 08:21
@ravibagul91 you are right, the idea is that we can use the last point where the old value exists. – Alvaro Sep 22 '19 at 08:23

Reading component state just after setting when using useState hook in react

3 Answers3

Linked