React上下文能否避免意外重渲染？将回调存入useState是否正确？

1. 实现方式是否正确？ #

这是一种可行且符合React官方文档建议的实现方式。

React Context的Caveats章节明确提到：如果上下文的value是每次渲染都会重新创建的对象或函数，会导致所有订阅该上下文的组件触发不必要的重渲染。你将包含回调的上下文对象放入useState中，利用useState初始值仅在组件首次渲染时计算一次的特性，确保了contextProviderObject在组件后续渲染过程中始终保持引用不变，完全契合文档中避免上下文值频繁变化的建议。

2. 是否能避免意外重渲染？ #

这种方式确实能有效避免意外重渲染。

如果不做任何缓存处理，每次App组件渲染时都会创建一个全新的上下文对象，导致AppContext.Provider的value属性引用发生变化，所有订阅了该上下文的组件都会被强制触发重渲染。而通过useState存储上下文对象后，只要你不主动调用setState更新这个对象（你的代码中也没有这么做），它的引用就会一直保持稳定，只有当上下文值真正需要更新时，消费组件才会重渲染，从根源上避免了无意义的重复渲染。

补充：可选的替代实现 #

除了用useState缓存，你也可以用useMemo达到同样的效果，代码如下：

const contextProviderObject = useMemo(() => ({
  showLoginModal: () => setShowLoginModal(true),
  onTooManyRequests: () => alert("You're trying too often. Please wait a bit"),
}), []);

两种方式的核心逻辑一致，都是通过缓存来稳定上下文对象的引用，你可以根据个人习惯选择。

内容的提问来源于stack exchange，提问作者Florian Walther