Предотвращение запуска useEffect при первом рендере в React

Быстрый ответ

const useUpdateEffect = (effect, deps) => {
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      return effect();
    }
  }, deps);
}

// Пример использования
useUpdateEffect(() => {
  // Код, который не должен выполняться при первичной отрисовке 😎
}, [/* зависимости */]);

Мы создали хук useUpdateEffect для сценариев, когда требуется пропустить начальный рендер. Он использует useRef для отделения первого монтирования компонента от всех последующих обновлений.

Применение useRef для пропуска первого рендера

Хук useRef создаёт изменяемую ссылку на объект, идеально подходящую для пропуска первого рендера:

const firstRender = useRef(true);

useEffect(() => {
  if (firstRender.current) {
    firstRender.current = false; // Прошло наше время начального рендера!
  } else {
    // Ваш эффект здесь
  }
}, []);

Таким образом, useRef запоминает состояние первого рендера, но при этом не вызывает повторный рендер. Это делает его идеальным инструментом для данной задачи. Он ненавязчиво "стоит по сторонам", продолжая трекинг.

Синхронизация эффектов изменения положения

useLayoutEffect позволяет активировать ваш код синхронно сразу после того, как все изменения в DOM внесены. Он предоставляет такую же синхронность эффектов, как и componentDidUpdate, обеспечивая их синхронное выполнение с обновлением пользовательского интерфейса.

const useUpdateLayoutEffect = (effect, deps) => {
  const isInitialMount = useRef(true);

  useLayoutEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      effect(); // Ваш супер-инструмент для синхронного отслеживания изменений в UI!
    }
  }, deps);
};

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

Визуализация

Визуализируйте useEffect как фотокамеру:

Первичный рендер: 📷👶 (Сорри, малыш, это не твой выход!)
Обновления:       📷🧒📷🧑📷👴 (Время блеснуть!)

Пропустим первый снимок:

const isFirstRender = useRef(true);

useEffect(() => {
    if (isFirstRender.current) {
        isFirstRender.current = false; // Затвор камеры закрыт 📷
        return;
    }
    // Улыбаемся для фото! 🧀📷 Снимаем начиная со второго рендера
});

Таким образом, наш фотограф избегает фотографирования новорожденных и открывает затвор лишь когда дети начинают играть с игрушками (или при последующих рендерах). 🚫👶➡️✅🧒🧑👴

Профессиональное использование useEffect

Оставайтесь крутыми при демонтировании

Не забывайте об управлении ресурсами. 🧊 Очищайте ресурсы после использования эффектов — демонтируйте функции внутри эффектов:

useEffect(() => {
  return () => {
    // Время для очистки! 
  };
}, []);

Подробнее об этом расскажет наш спикер на видео

Последовательность ведет к успеху

Если вам нужно сохранять данные между рендерами, useRef придет на помощь:

const lastExecution = useRef(Date.now());

useEffect(() => {
  if (Date.now() – lastExecution.current > 1000) {
    // Настал ваш момент! 
    lastExecution.current = Date.now();
  }
}, [/* зависимости */]);

Полезные материалы

1. Использование хука Effect в React — Официальное руководство от авторов React о работе с useEffect.
2. Как предотвратить запуск useEffect при первичном рендере — Мудростью из StackOverflow в ответе на вопрос о причинах активации useEffect при начальной отрисовке.
3. Полное руководство по использованию useEffect — Подробное руководство от Дэна Абрамова об useEffect.
4. Компоненты React, элементы и инстансы — Глубокое понимание тонкостей компонентов, элементов и инстансов в React.
5. useHooks — Обширная коллекция переиспользуемых хуков для React-приложений.
6. Различия между useEffect и useLayoutEffect — Мастер-класс от Кента К. Доддса когда и почему использовать useEffect вместо useLayoutEffect.