javascript - 如何繞過自定義 Hook 的 useEffect 依賴項？

這是我的範例程式碼：

const { getConversionList, conversionList } = useConversion();

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

useConversion 是一個 GraphQL 解析器掛鉤，我收到 Linting 錯誤提示需要添加依賴。但如果我添加依賴，則會導致無限渲染。

我如何才能安全地繞過它？

嘗試通過添加依賴導致無限渲染。我希望 useEffect 僅在加載時運行一次，因此添加了 [] 作為依賴

答案＃1

你可以透過使用 useRef 鉤子來追蹤該 effect 是否已經執行過，從而確保 useEffect 只執行一次：

const { getConversionList, conversionList } = useConversion();
const hasFetchedRef = useRef(false);

useEffect(() => {
  if (!hasFetchedRef.current) {
    getConversionList();
    hasFetchedRef.current = true;
  }
}, [getConversionList]);

答案＃2

對這一特定行禁用 linting 規則。
使用 ref 來存儲函數，這樣它在每次渲染時就不會改變。

import { useEffect, useRef } from 'react';
const { getConversionList, conversionList } = useConversion();
    
const getConversionListRef = useRef(getConversionList);
    
useEffect(() => {
  getConversionListRef.current();
}, []);