Понимание функции очистки React useEffect

— от Anom Warbhuvan

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

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

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

Что такое функция очистки useEffect в React?

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

Почему нам часто нужна очистка в React?

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

Есть побочные эффекты, которые остаются активными даже после размонтирования компонента. Это может привести к таким проблемам, как снижение производительности, ошибки и проблемы, которых мы не ожидали. Подводя итог, можно сказать, что функция очистки useEffect имеет решающее значение для управления побочными эффектами в жизненном цикле компонентов React. Поскольку вы здесь, я думаю, вы также хотели бы изучить useEffect Hook for React Lifecycle, чтобы понять, как управлять побочными эффектами в функциональных компонентах.

Когда вызывается функция очистки useEffect?

Функция очистки useEffect может иметь место в двух случаях:

1. Когда компонент, использующий хук useEffect, размонтируется.
2. Когда массив зависимостей в хуке useEffect изменяется, это вызывает повторную визуализацию компонента.

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

Очистка с помощью функции useEffect

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

Отмена запроса на получение

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

Когда мы делаем запрос на выборку с помощью fetch(), мы можем отменить его, вызвав метод AbortController. Мы можем использовать этот метод в функции очистки, чтобы избежать утечек памяти. Это встроенный веб-API, который позволяет нам сигнализировать запросу на выборку о том, что мы хотим его отменить.

Использование функции очистки для отмены запроса на выборку в компоненте React:

// Importing hooks from the React library
import { useEffect, useState } from 'react';
// Defining a functional component
function MyComponent() {
// Initializing a state variabl
  const [data, setData] = useState(null);
// Defining a side effect to fetch data from an API
  useEffect(() => {
// Create an instance of the AbortController API to abort the fetch request
    const controller = new AbortController();
// Define an asynchronous function to fetch data from the API
    const fetchData = async () => {
      try {
// Make a GET request to the API and pass the AbortSignal of the controller
        const response = await fetch('API', { signal: controller.signal });
// Parse the response body as JSON
        const json = await response.json();
// Set the state variable data and log errors
        setData(json);
      } catch (error) {
        console.error(error);
      }
    };
// Call the fetchData function to fetch data from the API
    fetchData();
    return () => {
      controller.abort();
    };
  }, []);
// Render the data if it is available, otherwise showing a loading message
  return (
    <div>
      {data ? (
        <div>
          <p>Title: {data.title}</p>
          <p>Status: {data.status ? 'Yes' : 'No'}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

Здесь мы создаем новый AbortController и передаем его сигнал параметрам запроса на выборку. Это позволяет нам отменить запрос, если компонент размонтируется. Затем мы возвращаем функцию очистки, которая вызывает метод abort AbortController, который отменяет запрос. Имейте в виду, что вы можете заменить URL-адрес в методе выборки на любую другую конечную точку API, которая возвращает данные JSON.

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

Очистка тайм-аутов

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

Тайм-ауты также можно использовать в тех случаях, когда вы хотите отложить выполнение некоторого кода. Например, вы можете захотеть показать сообщение об успехе в течение нескольких секунд после того, как пользователь выполнит действие, прежде чем скрыть его.

Теперь каждый раз, когда вы устанавливаете тайм-аут в компоненте, вы обычно хотите очистить его, если компонент размонтируется до того, как истечет тайм-аут. Если тайм-аут не сброшен, это приведет к странному поведению нашего приложения.

Чтобы очистить время ожидания, нам нужно использовать метод clearTimeout(). Этот метод позволяет нам отменить тайм-аут до его выполнения. Мы можем сохранить идентификатор тайм-аута в переменной и использовать его в функции очистки, чтобы очистить тайм-аут.

Этот код показывает, как вы можете использовать функцию очистки для очистки времени ожидания в компоненте React:

// import hooks from react
import { useEffect, useState } from 'react';
// create a functional component
function MyComponent() {
  const [counter, setCounter] = useState(0);
// Using useEffect hook set counter 
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setCounter(counter + 1);
    }, 3000);
//update if dependency array changes again
    return () => {
      clearTimeout(timeoutId);
    };
  }, [counter]);

  return (
    <div>
      <p>Count: {counter}</p>
    </div>
  );
}

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

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

Интервалы очистки

В хуке React useEffect интервал — это способ многократного выполнения функции по истечении определенного периода времени. Функция setInterval принимает два аргумента для создания интервала, где функция — первый аргумент, а временной интервал — второй аргумент.

Функция, переданная в setInterval, будет выполняться повторно с указанным интервалом до тех пор, пока компонент не размонтируется или интервал не будет очищен с помощью функции clearInterval. Это помогает в опросе сервера на наличие обновлений или периодическом обновлении пользовательского интерфейса.

Вы можете сослаться на этот код о том, как использовать функцию очистки для очистки интервалов в компоненте React:

// import hooks from react 
import { useEffect, useState } from 'react';
// create a functional component
function MyComponent() {
  const [counter, setCounter] = useState(0);
// use the hook to update the counter by 1
  useEffect(() => {
    const intervalNumber = setInterval(() => {
      setCounter(counter + 1);
    }, 3000);
// if the dependency array changes, hook will run again
    return () => {
      clearInterval(intervalNumber);
    };
  }, [counter]);

  return (
    <div>
      <p>Count: {counter}</p>
    </div>
  );
}

В этом примере мы выбрали интервал, который обновляет переменную состояния счетчика каждую секунду. Затем интервал отменяется вызовом метода clearInterval() с intervalNumber в функции очистки, которую мы впоследствии возвращаем.

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

Очистка прослушивателей событий

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

Хук useEffect можно использовать для создания прослушивателя событий и его очистки при размонтировании компонента. Чтобы создать прослушиватель событий с помощью useEffect, вы можете использовать метод addEventListener для объекта окна внутри хука.

Например, допустим, вы хотите создать прослушиватель событий для события прокрутки. Вы можете использовать следующий код:

// import the hooks from react
import { useState, useEffect } from 'react';

function MyComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function scrollHandler() {
      // Update the state with the current scroll position
      setScrollPosition(window.pageYOffset);
    }

    // Add the event listener
    window.addEventListener('scroll', scrollHandler);

    // Remove the event listener on cleanup
    return () => {
      window.removeEventListener('scroll', scrollHandler);
    };
  }, []);

  return (
    <div>
      <p>Current scroll position: {scrollPosition}px</p>
    </div>
  );
}

В этом коде хук useEffect используется для добавления прослушивателя событий для события прокрутки с помощью window.addEventListener. Функция scrollHandler вызывается при срабатывании события.

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

Оператор return внутри хука используется для очистки прослушивателя событий. Когда компонент размонтирован, вызывается переданная в return функция, которая удаляет прослушиватель событий с помощью window.removeEventListener.

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

Очистка веб-сокетов

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

Когда компонент смонтирован, соединение WebSocket может быть установлено и очищено с помощью хука useEffect. Используйте API WebSocket внутри хука, чтобы установить соединение WebSocket с помощью useEffect.

Теперь, если вы планируете подключаться с помощью WebSocket, вы можете обратиться к коду, который я поделился здесь:

// import hook from react
import { useEffect } from 'react';
// create a functional component
function MyComponent() {
  useEffect(() => {
    const socket = new WebSocket('ws://localhost:3000');

    socket.addEventListener('open', openHandle);
    socket.addEventListener('message', messageHandle);
    socket.addEventListener('close', closeHandle);

    // Clean up the WebSocket connection
    return () => {
      socket.removeEventListener('open', openHandle);
      socket.removeEventListener('message', messageHandle);
      socket.removeEventListener('close', closeHandle);
      socket.close();
    };
  }, []);

  function handleOpen() {
    console.log('WebSocket connection opened');
  }

  function handleMessage(event) {
    console.log('Received data from server:', event.data);
  }

  function handleClose(event) {
    console.log('WebSocket connection closed with code:', event.code);
  }

  return (
    <div>
      {/* Your component code here */}
    </div>
  );
}

Используя API WebSocket, соединение WebSocket устанавливается в этом коде с помощью хука useEffect. Функции openHandle, messageHandle и closeHandle отвечают за обработку событий во время связи между клиентом и сервером. Функция openHandle успешно соединится с сервером, а функция messageHandle сработает при получении данных клиентом. При этом функция closeHandle вызывается при закрытии соединения с сервером.

Пустой массив, отправленный в качестве второго параметра useEffect, указывает, что хук следует использовать только один раз при монтировании компонента. Предложение return хука используется для закрытия соединения WebSocket. Когда часть программы, связанная с этой функцией, больше не используется, выполняется предоставленная функция. Эта функция удаляет прослушиватели событий с помощью socket.removeEventListener и завершает соединение с сервером с помощью socket.close.

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

Заключение

Понимание функции очистки useEffect имеет решающее значение для правильного управления побочными эффектами компонентов React. Тем не менее, useEffect — это лишь часть сложного жизненного цикла React, и важно иметь четкое представление о всей картине для создания надежных и производительных приложений. Мы настоятельно рекомендуем вам ознакомиться с другими нашими сообщениями в блоге по связанным темам, таким как useEffect Hook для жизненного цикла React, руководство по использованию useEffect hook и массив зависимостей useEffect.

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

До тех пор. Удачного кодирования!

Этот блог изначально был опубликован на Zipy