Как вызвать функцию загрузки с помощью React useEffect только один раз

Если вы хотите запустить функцию, заданную useEffect, только после первоначального рендеринга, вы можете указать пустой массив в качестве второго аргумента.

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}

Передайте пустой массив в качестве второго аргумента в useEffect. Это эффективно сообщает React, цитируя документы:

This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

Вот фрагмент, который вы можете запустить, чтобы показать, что он работает:

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src = "https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id = "app"></div>

TL; DR

useEffect(yourCallback, []) - вызовет обратный вызов только после первого рендеринга.

Детальное объяснение

useEffect запускается по умолчанию после рендеринга компонента каждый (таким образом вызывая эффект).

Помещая useEffect в свой компонент, вы говорите React, что хотите запустить обратный вызов в качестве эффекта. React запустит эффект после рендеринга и после выполнения обновлений DOM.

Если вы передадите только обратный вызов - обратный вызов будет запускаться после каждого рендеринга.

Если передать второй аргумент (массив), React будет запускать обратный вызов после первого рендеринга и каждый раз, когда изменяется один из элементов в массиве. например, при размещении useEffect(() => console.info('hello'), [someVar, someOtherVar]) - обратный вызов будет выполняться после первого рендеринга и после любого рендеринга, при котором изменяется один из someVar или someOtherVar.

Передав вторым аргументом пустой массив, React будет сравнивать после каждого рендеринга массива и увидит, что ничего не было изменено, таким образом вызывая обратный вызов только после первого рендеринга.

useMountEffect хук

Запуск функции только один раз после монтирования компонента является настолько распространенным шаблоном, что оправдывает собственный крючок, скрывающий детали реализации.

const useMountEffect = (fun) => useEffect(fun, [])

Используйте его в любом функциональном компоненте.

function MyComponent() {
    useMountEffect(function) // function will run only once after it has mounted. 
    return <div>...</div>;
}

О хуке useMountEffect

При использовании useEffect со вторым аргументом массива React выполнит обратный вызов после монтирования (начального рендеринга) и после изменения значений в массиве. Поскольку мы передаем пустой массив, он запустится только после монтирования.

Мне нравится определять функцию mount, она обманывает EsLint так же, как и useMount, и я считаю ее более понятной.

const mount = () => {
  console.info('mounted')
  // ...

  const unmount = () => {
    console.info('unmounted')
    // ...
  }
  return unmount
}
useEffect(mount, [])

оставьте массив зависимостей пустым. надеюсь, это поможет вам лучше понять.

   useEffect(() => {
      doSomething()
    }, []) 

пустой массив зависимостей запускается только один раз, при монтировании

useEffect(() => {
  doSomething(value)
}, [value])  

передать value как зависимость. если зависимости изменились с последнего раза, эффект будет запущен снова.

useEffect(() => {
  doSomething(value)
})  

нет зависимости. Это вызывается после каждого рендеринга.

function useOnceCall(cb, condition = true) {
  const isCalledRef = React.useRef(false);

  React.useEffect(() => {
    if (condition && !isCalledRef.current) {
      isCalledRef.current = true;
      cb();
    }
  }, [cb, condition]);
}

и пользуйся этим.

useOnceCall(() => {
  console.info('called');
})

или

useOnceCall(()=>{
  console.info('Fetched Data');
}, isFetched);

Вот моя версия ответа Ясина.

import {useEffect, useRef} from 'react';

const useOnceEffect = (effect: () => void) => {
  const initialRef = useRef(true);

  useEffect(() => {
    if (!initialRef.current) {
      return;
    }
    initialRef.current = false;
    effect();
  }, [effect]);
};

export default useOnceEffect;

Использование:

useOnceEffect(
  useCallback(() => {
    nonHookFunc(deps1, deps2);
  }, [deps1, deps2])
);

Мы должны перестать думать о методах жизненного цикла компонентов (например, componentDidMount). Мы должны начать думать эффектами. Эффекты React отличаются от методов жизненного цикла классов в старом стиле.

По умолчанию эффекты запускаются после каждого цикла рендеринга, но есть возможность отказаться от этого поведения. Чтобы отказаться, вы можете определить зависимости, которые означают, что эффект выполняется только при изменении одной из зависимостей.

Если вы явно определяете, что эффект не имеет зависимости, эффект запускается только один раз, после первого цикла рендеринга.

1-е решение (с жалобой на ESLint)

Итак, первое решение для вашего примера будет следующим:

function MyComponent() {

    const loadDataOnlyOnce = () => {
      console.info("loadDataOnlyOnce");
    };

    useEffect(() => {
        loadDataOnlyOnce(); // this will fire only on first render
    }, []);
    return (...);
}

Но тогда плагин React Hooks ESLint будет жаловаться примерно на это:

React Hook useEffect has missing dependency: loadDataOnlyOnce. Either include it or remove the dependency array.

Сначала это предупреждение кажется раздражающим, но, пожалуйста, не игнорируйте его. Это помогает вам лучше писать код.

2-е решение (правильный путь, если зависимость не зависит от компонента)

Если мы добавим loadDataOnlyOnce в массив зависимостей, наш эффект будет запускаться после каждого цикла рендеринга, потому что ссылка на loadDataOnlyOnce изменяется при каждом рендеринге, потому что функция уничтожается (сбор мусора) и создается новая функция, но это именно то, что мы не хотим.

Мы должны сохранять ту же ссылку на loadDataOnlyOnce во время циклов рендеринга.

Так что просто переместите определение функции выше:

const loadDataOnlyOnce = () => {
  console.info("loadDataOnlyOnce");
};

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire only on first render
    }, []);
    return (...);
}

3-е решение (правильный путь, если зависимость зависит от компонента)

Если зависимость эффекта (loadDataOnlyOnce) зависит от компонента (нужны реквизиты или состояние), есть встроенный в React useCallback-Hook.

Элементарный смысл useCallback-Hook состоит в том, чтобы сохранять ссылку на функцию идентичной во время циклов рендеринга.

function MyComponent() {
    const [state, setState] = useState("state");

    const loadDataOnlyOnce = useCallback(() => {
      console.info(`I need ${state}!!`);
    }, [state]);

    useEffect(() => {
        loadDataOnlyOnce(); // // this will fire only when loadDataOnlyOnce-reference changes
    }, [loadDataOnlyOnce]);
    return (...);
}