React自定义Hook：useEffect执行时机与useQuery数据更新异常问题

1. useEffect是否会在return语句之前执行？ #

不会。React的执行流程是：先同步执行Hook/组件里的所有代码（包括return语句，完成本次渲染），等渲染完成、DOM更新后，才会去执行useEffect的回调函数。所以useEffect的执行时机永远在当前渲染的return之后。

2. 自定义Hook返回旧结果的问题解决 #

你的代码里完全没必要用useState和useEffect来包装useQuery的返回值，这多此一举反而导致了问题：

• 当props变化时，useQuery会重新执行并返回新的data/loading/error/refetch，但你的result是通过useState初始化的，第一次return时，result还是旧的状态值，要等useEffect触发（渲染完成后）才会更新result，这就导致你拿到的是上一次的结果。

直接简化代码即可，去掉多余的useState和useEffect：

function useCustomHook(props) {
  const { data, loading, error, refetch } = useQuery(query, { variables: { props } });
  return { data, loading, error, refetch };
}

这样每次props变化，useQuery会自动重新请求，返回的就是最新的结果，完全不需要手动维护状态。

如果确实需要对useQuery的结果做额外处理后再返回，也不要用useState存储，直接在Hook里同步处理后返回即可，比如：

function useCustomHook(props) {
  const { data, loading, error, refetch } = useQuery(query, { variables: { props } });
  // 对data做同步处理
  const processedData = data ? transformData(data) : null;
  return { data: processedData, loading, error, refetch };
}

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