React Hooks问题：为什么setState未触发Context.Provider重新渲染？

问题根因与解答 #

你遇到的所有问题都源于setVisLocationData更新逻辑里的引用不变错误：

• 你直接修改了传入的prevData原有对象，之后返回了和之前完全相同的对象引用，React的状态更新浅比较逻辑会判定「状态未发生变化」，直接跳过重渲染流程。

1. 为什么子组件拿不到更新后的visLocationData？

React Context的更新触发条件是Provider的value属性发生变化。因为状态更新被跳过，LocationProvider不会重渲染，传递给Provider的value对象始终是初始渲染时的旧值，子组件消费到的自然就是未更新的初始状态。
你在React开发者工具中能看到最新状态，是因为DevTools会直接读取状态的最新内存值，不受重渲染逻辑限制。

2. 为什么没有成对的渲染日志？

17次addLocationData调用确实触发了17次setVisLocationData执行，但因为每次更新都返回了原有对象引用，React认为状态无变化，全部跳过了重渲染，自然不会输出Rendering location provider日志。
此外React默认会对同一次事件循环中的多次状态更新做批量合并，哪怕你逻辑正确，也不会出现17次重渲染，只会合并为1次重渲染。

修复方案 #

修改setVisLocationData的更新逻辑，每次返回新的对象即可：

const addLocationData = React.useCallback((id: string, rect: ClientRect) => {
    setVisLocationData((prevData) => {
        console.log(`[Debugging]: Setting location data for ${id}`);
        // 不要直接修改原prevData，返回全新的对象
        return {
            ...prevData,
            [id]: rect
        };
    });
}, []);

如果希望进一步优化性能，避免多次状态更新触发多次重渲染，可以把批量更新逻辑放在addLocationData外部，或者用useTransition等API做批量处理，核心逻辑不变。

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