使用useMemo导致React自定义Hook无限触发的原因是什么？

1. useMemo 和 useEffect 的核心用途差异 #

useMemo 的设计目的是缓存昂贵的计算结果，避免组件每次渲染时重复执行耗时计算，它并不是用来处理副作用（比如异步请求、修改状态这类会影响组件外部或触发重渲染的操作）的工具。而 useEffect 才是 React 专门用来处理副作用的 Hook，它的执行时机和触发逻辑都是为副作用场景设计的。

2. 为什么用 useMemo 会导致无限触发？ #

你的代码里，useMemo 的回调函数调用了 getLPTokenData，这个函数内部通过 setStatus、setPayload 等方法修改了组件状态——状态更新会触发组件重新渲染。

而 React 并不保证空依赖的 useMemo 只会执行一次：当组件重新渲染时，React 可能会认为之前缓存的 useMemo 结果已经失效，会重新执行其回调函数，再次调用 getLPTokenData，再次触发状态更新，形成渲染→执行useMemo→修改状态→再次渲染的无限循环。

3. 为什么换成 useEffect 就正常？ #

useEffect 针对副作用做了专门的设计：当依赖项为空数组时，它只会在组件挂载完成后执行一次。即使回调里的 setState 触发了组件重新渲染，只要依赖项没有变化，useEffect 就不会再次执行，自然不会出现循环触发的问题。

正确写法示例 #

把 Hook 里的 useMemo 替换成 useEffect 即可：

useEffect(() => {
    getLPTokenData();
}, [])

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