React自定义Hook跨组件共享状态失效及最优状态管理方案咨询

核心需求：点击Child组件的按钮后，状态变更需同步到父组件App中，原本以为使用带state的React自定义Hook是可行方案，但实际未达到预期。

代码实现 #

自定义Hook useMyHook #

import { useState } from 'react';
const useMyHook = () => {
  const [test, setTest] = useState(false);

  const change = (param) => {
    console.log(1, 'param in change fn:', param);
    setTest(param);
  };

  return {
    test,
    change,
  };
};

export default useMyHook;

父组件 App #

import React, { useEffect } from 'react';
import Child from './Child';
import useMyHook from './myHook';

export default function App() {
  const { test } = useMyHook();

  useEffect(() => {
    console.log(2, 'in APP level, test is:', test);
  }, [test]);

  return (
    <>
      {/* 期望此处能同步显示test的变化 */}
      <p>test: {test.toString()}</p>

      <Child />
    </>
  );
}

子组件 Child #

import React from 'react';
import useMyHook from './myHook';

export default function Child() {
  const { test, change } = useMyHook();
  return (
    <>
      <p>I am child</p>
      <button
        onClick={() => {
          change(!test);
        }}
      >
        click to change
      </button>
    </>
  );
}

问题现象 #

点击Child组件的按钮时，useMyHook中的console.log会执行，但App组件中的useEffect从未触发，页面上的<p>test: {test.toString()}</p>也没有同步更新状态。

咨询问题 #

1. 跨组件共享数据的最优方案是什么？

   • 不想使用props drilling；
   • 仅共享一个boolean值，觉得Context方案过重；
   • 使用react-query是否是理想选择？

2. 补充疑问：

   • 已经意识到每次调用useMyHook()都会创建独立实例，App和Child的Hook状态完全无关；
   • 实际场景中App和Child之间有多层嵌套，props drilling确实不合适；
   • 最终选择了react-query（项目已在使用），但听说Context状态变更时所有使用该Context的组件都会重渲染，想知道react-query是否也是如此？如果是，是否应该改用Zustand或Jotai？

内容的提问来源于stack exchange，提问作者Téwa