React钩子检查什么状态改变导致重新渲染

Question

现在有了钩子，我已经将组件的状态分成了更多的微型状态。在我想找出导致特定重新渲染的状态变化之前，这似乎更好。

如何轻松找出导致特定重新渲染的状态变化？

Answer 1

如果需要跟踪状态更新以进行状态管理（例如访问先前的状态值），则应使用包裹useState的自定义钩子对此进行显式处理。

关于调试，React开发人员工具目前不提供此功能，尽管该信息可以通过开发人员工具中使用的渲染器未记录的API获得。

可以在React dispatchAction函数中添加一个断点，并逐步调用堆栈，以了解调用了哪个状态设置器：

或者可以使用自定义钩子代替useState来跟踪状态更新：

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

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

  return [state, setState];
};