Nic Lin's Blog

喜歡在地上滾的工程師

避免 React 中的 useEffect 無限 render

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])

參考資源

comments powered by Disqus