React useEffect: setState in return function does not update state in time

Question

I have made an example here: https://codesandbox.io/s/cocky-brattain-de5r4

I'm making a tabbed interface when switching from one to another, a component should first unregister itself (clearing some values from parent state) through the useEffect return function, and re-register itself (set some values in the parent). However, the clean up doesn't seem to work. i.e. the value does not change before the register function starts.

Look at the console log, the first time it logs an empty object, as the initial value. But when clicking on tab20, the logged value shows what it is before unregistering.

What is the problem here?

What I'm expecting to happen is:

(App load) -> console log: {} -> [register]aaa set to 1 -> (switch tab) -> [unregister]aaa set to undefined -> console log: {aaa: undefined(but it is 1)} -> [register]aaa set to 1

Should be {aaa: undefined}, since unregister is called -> console log -> register, so console log should show the value after unregister and before register — Xun Yang, Jan 23 '20 at 16:08

score 1 · Accepted Answer · answered Jan 23 '20 at 16:34

(App load) -> console log: {} -> [register]aaa set to 1 -> (switch tab) -> [unregister]aaa set to undefined -> console log: {aaa: undefined(but it is 1)} -> [register]aaa set to 1

Actually its:

(App load) -> console log (myVal):{} -> [register]aaa set to 1 -> (switch tab) -> update the closure within register with (myVal = {aaa:1}) -> [unregister]aaa set to undefined -> console log: {aaa: 1} (because of previous closure)

The problem is when you switching tab, the components re-renders and the register function is re-declared which is updating its closure (myVal).

To fix it (the logging result), get rid of the closure:

const register = useCallback(name => {
  setMyVal(prevState => {
    console.log(prevState);
    return { ...prevState, [name]: 1 };
  });
}, []);

Thank you very much! Was not very familiar with useCallback. Will have to check it out — Xun Yang, Jan 24 '20 at 08:53

React useEffect: setState in return function does not update state in time

1 Answers1