score:3

If state updates need to be tracked for state management like accessing previous state values, this should be handled explicitly with custom hooks that wrap useState.

As for debugging, React dev tools currently don't offer this functionality, although this information may be available through renderer undocumented API used in dev tools.

It's possible to add a breakpoint inside React dispatchAction function and walk call stack up to know which state setter was called:

debug useState

Or custom hook can be used instead of useState to keep track of state updates:

const useDebuggableState = initialState => {
  const [state, setState] = useState(initialState);

  useMemo(() => {
    'a line to add breakpoint';
  }, [state]);

  return [state, setState];
};

Related Query

More Query from same tag