React useEffect

useEffect — это, пожалуй, самый запутанный и непонятный хук в React. Сегодня я хочу прояснить для вас этот вопрос.

Мы постоянно используем хуки в Make It Real, и понимание useEffect крайне важно, если мы собираемся писать код React в современном стиле.

Далее мы рассмотрим:

  • Что такое useEffect?
  • Как запустить эффект на каждом render.
  • Как запустить эффект только на первом render
  • Как запустить эффект в первом render и повторно запустить его при изменении «зависимости»
  • Как запустить эффект с очисткой

Что такое useEffect?

Хук useEffect позволяет нам выполнять побочные эффекты для наших компонентов функций. Побочные эффекты — это, по сути, все, где мы хотим, чтобы произошло «императивное» действие. Это такие вещи, как:

  • Вызовы API
  • обновление DOM
  • подписка на слушателей событий

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

Выполнение useEffect при каждом рендеринге

Хук useEffect не возвращает никакого значения, но принимает два аргумента. Первый является обязательным, а второй — необязательным. Первый аргумент — это функция обратного вызова эффекта, который мы хотим, чтобы Hook выполнил (т.е. сам эффект). Предположим, мы хотим поместить сообщение console.log() внутрь обратного вызова useEffect.

import { useEffect } from "react";

export const FunctionComponent = () => {
  useEffect(() => {
    console.log("run for every componentrender");
  });

  return (
    // ...
  );
}
Войдите в полноэкранный режим Выход из полноэкранного режима

По умолчанию эффект, установленный в хуке useEffect, выполняется при первом рендеринге компонента и после каждого обновления. Если мы выполним приведенный выше код, то заметим, что по мере рендеринга нашего компонента генерируется сообщение console.log('run for every componentrender'). Если наш компонент будет перерендерирован (например, в результате изменения состояния с помощью чего-то вроде useState), эффект будет запущен снова.

Иногда повторный запуск эффекта на каждом рендере — это именно то, что вам нужно. Но чаще всего эффект нужно использовать только в определенных ситуациях, например, при первом рендере.

Как запустить useEffect только на первом рендере

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

import { useEffect } from "react";

export const FunctionComponent = () => {
  useEffect(() => {
    console.log("run only for first component render (i.e.component mount)");
  }, []);

  return (
    // ...
  );
}
Войдите в полноэкранный режим Выход из полноэкранного режима

С помощью приведенного выше кода сообщение console.log() будет появляться только при первом монтаже компонента и больше не будет создаваться, даже если компонент будет повторно смонтирован несколько раз.

Это гораздо более «эффективно», чем запуск на каждом рендере, но нет ли золотой середины? Что если мы захотим переделать эффект, если что-то изменится?

Запустите useEffect при первом рендере и запустите его снова, когда зависимость изменится.

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

Предположим, мы хотим вызывать сообщение console.log() каждый раз, когда значение свойства состояния изменяется. Мы можем достичь этого, поместив свойство state в зависимость от обратного вызова эффекта. См. следующий пример кода:

import { useState, useEffect } from "react";

export const FunctionComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(
      "run for first component render and re-run when 'count' changes"
    );
  }, [count]);

  return (
    <button onClick={()=> setCount(count + 1)}>
      Click to increment count and trigger effect
    </button>
  );
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Выше, в шаблоне компонента у нас есть кнопка, отвечающая за изменение значения свойства состояния count при нажатии. Каждый раз, когда свойство состояния count изменяется (т.е. каждый раз, когда нажимается кнопка), мы заметим, что выполняется обратный вызов эффекта и запускается сообщение console.log().

Выполнение эффекта с очисткой

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

import { useState, useEffect } from "react";

export const FunctionComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(
      "run for first component render and re-run when 'count' changes"
    );

    return () => {
      console.log("run before the next effectand when component unmounts");
    };
  }, [count]);

  return (
    <button onClick={()=> setCount(count + 1)}>
      Click to increment count and trigger effect
    </button>
  );
}
Войдите в полноэкранный режим Выход из полноэкранного режима

В приведенном выше примере мы заметим, что сообщение функции очистки срабатывает до того, как будет выполнен нужный эффект. Кроме того, если наш компонент когда-нибудь будет размонтирован, функция очистки также будет выполнена.

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

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

Это, в основном, все различные способы использования хука useEffect для запуска побочных эффектов на компонентах. Я приглашаю вас ознакомиться с этим визуальным руководством по UseEffect от ALEX SIDORENKO, которое иллюстрирует эти понятия с помощью серии GIF, которые одновременно умны и эффективны, особенно для визуальных учеников. Если вы хотите узнать больше, есть также визуализация того, как работают функции первого класса.

@khriztianmoreno

Увидимся в следующий раз.

Оцените статью
Procodings.ru
Добавить комментарий