React组件中如何在useEffect与用户操作中复用同一功能？

当前实现的问题 #

你的代码功能上可以正常运行，但不符合React Hooks的依赖规范：

• useEffect中调用了resolveSessionData，但该函数没有被加入到依赖数组中。虽然当前resolveSessionData内部没有引用会变化的变量/状态，暂时不会引发Bug，但如果后续修改函数逻辑（比如加入对someProp或其他状态的引用），就会触发过时闭包问题，导致获取的数据不符合预期。
• 每次组件渲染时，resolveSessionData都会被重新创建，虽然对功能影响不大，但会造成不必要的函数实例生成。

更优实现方案 #

方案1：用useCallback稳定函数引用 #

通过useCallback包裹resolveSessionData，确保函数引用在依赖不变时保持稳定，同时完善useEffect的依赖数组，既符合Hooks规则，又实现函数复用：

const { useEffect, useState, useCallback } = require("react");

const Component = ({someProp}) => {
  const [itemData, setItemData] = useState(null);

  // 使用useCallback固定函数引用，依赖为空是因为setItemData是useState返回的稳定函数，database为全局资源
  const resolveSessionData = useCallback(() => {
    const data = database.getItemData();
    setItemData(data);
  }, []);

  useEffect(() => {
    if (someProp) {
        resolveSessionData();
    }
  }, [someProp, resolveSessionData]); // 补充resolveSessionData到依赖数组

  return <div>
    {/* 渲染itemData */}
    <button onClick={resolveSessionData}>
        Activate Lasers
    </button>
  </div>;
};

方案2：提取独立工具函数（如果逻辑通用） #

如果resolveSessionData的逻辑不止在当前组件复用，还可以把它提取到组件外部作为独立工具函数，这样既避免组件内重复创建，也方便跨组件复用：

const { useEffect, useState } = require("react");

// 提取到组件外部，成为独立函数
const resolveSessionData = (setItemData) => {
  const data = database.getItemData();
  setItemData(data);
};

const Component = ({someProp}) => {
  const [itemData, setItemData] = useState(null);

  useEffect(() => {
    if (someProp) {
        resolveSessionData(setItemData);
    }
  }, [someProp]); // 依赖仅需someProp，因为外部函数引用稳定

  return <div>
    {/* 渲染itemData */}
    <button onClick={() => resolveSessionData(setItemData)}>
        Activate Lasers
    </button>
  </div>;
};

补充说明 #

如果database.getItemData是异步操作（比如API请求），记得要处理取消请求的逻辑，避免组件卸载后更新状态引发内存泄漏：

const resolveSessionData = useCallback(async () => {
  const abortController = new AbortController();
  try {
    const data = await database.getItemData({ signal: abortController.signal });
    setItemData(data);
  } catch (err) {
    if (err.name !== 'AbortError') {
      // 处理其他错误
    }
  }
  return () => abortController.abort();
}, []);

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