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

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

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

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

TL; DR

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

Подробное объяснение

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

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

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

Если передать второй аргумент (массив), React будет запускать обратный вызов после первого рендеринга и каждый раз, когда изменяется один из элементов в массиве. например, при размещении useEffect(() => console.log('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 выполнит обратный вызов после монтирования (начального рендеринга) и после изменения значений в массиве. Поскольку мы передаем пустой массив, он запустится только после монтирования.

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

Это сообщает React, что ваш эффект не зависит от каких-либо значений свойств или состояния, поэтому его не нужно запускать повторно.

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

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>

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

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

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

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

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

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

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

or

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

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

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

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

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

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

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

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