React中无需useEffect即可请求API？为何用useState未触发无限循环？

一、这种写法能运行的原因 #

React的useState支持惰性初始化机制：当你把一个函数作为useState的初始值参数时，这个函数只会在组件首次渲染阶段执行一次，它的返回值会被用作该state的初始值。

你朋友的代码就是利用了这个机制——把API请求逻辑放在了这个惰性初始化函数里，组件首次渲染时会触发fetchData()，进而调用API并通过setMovieData更新状态，所以功能上能正常运行。

但要明确：这是对useState的错误用法，因为这个useState创建的state完全没被使用，只是借了它的初始化时机来执行副作用逻辑，这类场景本来应该用useEffect。

二、不会触发无限循环的原因 #

1. 惰性初始化函数的执行时机固定：只有组件第一次渲染时，React才会调用这个初始化函数；后续因为setMovieData导致组件重渲染时，React会直接跳过这个函数的执行，不会重复触发fetchData，自然不会反复调用setState造成循环。
2. 代码里给useState传的第二个参数[]是无效的——useState根本没有依赖数组这个参数（这是useEffect的特性），所以这个数组会被React直接忽略，不影响执行逻辑，但也暴露了写法的错误。

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