useEffect 會在 component 渲染完成後執行，類似 callback function

執行順序

1. invoke function component
2. render
3. execute function in useEffect

所以像我的 component 是從 redux 灌資料進來的，然後在 useEffect 中去 call api 來 fetch data。

結果就是掉進無限循環

1. fetch 完 data
2. props 更新，觸發 render
3. render 完 callback function 執行 fetch，回到步驟 1

所以其實 useEffect 後面還有一個參數 dependencies

這個參數是一個 array，用途是這個 array 之中的東西如果沒有被變更，就不會觸發 rerender。

也就是說，如果要強制不讓他重新加載，可以放空 array。

或是放類似一個 key，只有當 key 被更動，才重新執行 useEffect 裡面的 function

const [name, setName] = useState(null)

useEffect(() => {
  # do something
}, [name])

參考資源

• Hooks tip! Avoid infinite recursion in React.useEffect()