React.useEffect() — один из самых крутых хуков среди хуков React. Если вы погрузились в мир функциональных компонентов, то этот хук покажется вам знакомым, в то время как вы, вероятно, все еще глубоко погрязли в старых приложениях React. Возможно, вам понадобятся таблетки функциональных компонентов React! Должен сказать, что команда разработчиков библиотеки React активно пропагандирует использование функциональных компонентов и подхода Hooks при разработке приложений React. Это определенно стоит того, чтобы приложить усилия, идя по пути Hooking!

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

useEffect(() => { 
    console.log (“Runing side effects”) 
}) 

Примечание: Это выполняется каждый раз при рендеринге компонента! В реальности вам это может не понадобиться.

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

Что такое хук?

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

useEffect() обрабатывает побочные эффекты

Назначение функции useEffect() — обрабатывать и управлять побочными эффектами. А что это за побочные эффекты? Побочные эффекты — это любая операция в функции, которая не имеет прямого отношения к конечному результату функции. Если вы, вероятно, хотели получить данные из API или другого источника данных, когда-либо хотели возиться с DOM вручную в React-приложениях или настроить службу подписки, чтобы слушать испускаемое событие, все это и многое другое является побочными эффектами в реальной жизни React.

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

import React from 'react'; 

function App() { 

  return ( 

    <div> 

   <SayGreeting name="Olatunde"/> 

  </div> 

  ); 

} 

const SayGreeting = (name) => { 

  const greeting= `You welcome, ${name}!`; 

  // Side-effect with DOM manipulation! 

  document.title = `Greetings to ${name}`; 

  // Main expected function output 

  return <div>{greeting}</div>; 

  } 

export default App; 

В предыдущем фрагменте у нас есть компонент SayGreeting с побочным эффектом document.title = Приветствие ${name}; Очевидно, что это неправильный способ добавления побочного эффекта в компонент. Лучше передать это на обработку useEffect.

Давайте рефакторим наш фрагмент с помощью useEffect () для управления побочным эффектом компонента:

const SayGreeting = (name) => {  

const greeting= `You welcome, ${name}! `;  

   useEffect(() => {   

   document.title = `Greetings to ${name}`; //Side-effect with DOM manipulation inside useEffect()!  

  }, [name]);  

  // Main expected function output  

  return <div>{greeting}</div>;  

  } 

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

По своей сути компонент способен на две вещи: рендеринг и обработку побочных эффектов. Лучшей практикой всегда будет оставить обработку побочных эффектов на усмотрение useEffect().

Как передать аргумент в useEffect()

Хук useEffect() любезно принимает два аргумента: useEffect(callback, [dependencies]);

* Обратный вызов — это функция, содержащая логику побочного эффекта.

*Зависимость представляет собой необязательный массив зависимостей или зависимостей. UseEffect() выполняет обратный вызов при каждом изменении зависимостей.
Это объясняет стандартный сценарий использования функции useEffect()

useEffect(() => {  
    // Runs every time the component renders  
})  

useEffect(() => {  
    // Runs only on initial render  
}, []) // Optional second argument: dependency array  

useEffect(() => {  
    // Runs only when 'OptionalDataValue' changes  
}, [OptionalDataValue]) 

Получение данных из конечной точки по сети

Давайте рассмотрим, как useEffect() выполняет побочный эффект извлечения данных.

Следующий компонент FetchUsers извлекает список пользователей из указанной конечной точки в сети:

import React,{useEffect,useState} from 'react';  

function App() { 

  return ( 

    <div>  

   <FetchUsers /> 

  </div> 

  ); 

}  

  function FetchUsers() {  

    const [users, setUsers] = useState([]);  

    useEffect(() => {  

      async function fetchUsers() {  

        const response = await fetch (' https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8');  

        const fetchedUsers = await response.json(response);  

        setUsers(fetchedUsers);  

      }  

      fetchUsers();  

    }, [users]); 

     return (  

      <div>  

        {users.map((user) => <div key={user.name}>{user.name}</div>)}  

      </div>  

    );  

   }  

export default App; 

UseEffect() запускает запрос на выборку, вызывая асинхронную функцию fetchUsers() после начального компонентаDidMount.

Когда запрос завершается, setUsers(fetchedUsers) обновляет текущее состояние пользователей уже полученным списком пользователей.

Мы устанавливаем пустой массив [] dependency, чтобы указать, что useEffect() должен выполняться после того, как компонент смонтирован, и если в массив была добавлена какая-либо зависимость, которая может быть значением prop или state-[users]. Мы повторно запустим useEffect() только после того, как список пользователей изменится.

useEffect() и методы жизненного цикла компонента

Компоненты в React проходят три основные фазы: монтирование, обновление и размонтирование. Это объясняет связь компонента с деревом DOM. Вы должны быть знакомы с тем, как React использует виртуальный DOM поверх родного DOM браузера для интеллектуального обновления DOM при любом изменении состояния. Это одна из инновационных идей React.

Итак, когда компонент монтируется в DOM, вызывается componentDidMount(), чтобы выполнить свою побочную операцию, которая может быть сетевыми запросами или мутациями в DOM, как объяснялось ранее.

componentDidMount() { 

Console.log (“component mounted successfully”); 

 } 

UseEffect() инкапсулирует componentDidMount(), componentDidUpdate() и componentWillUnmount().

Мы рассмотрим, как методы useEffect() обрабатывают этапы жизненного цикла компонента.

Компонент выполнил монтаж

С помощью componentDidMount():

useEffect(() => { 
console.log("componentDidMount"); 
}; 

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

Мы также можем посмотреть на это:

useEffect(() => {  
console.log("componentDidMount");  
}, []); 

В предыдущем случае передается пустой массив второго аргумента. Это означает, что когда компонент монтируется, useEffect() выполняется один раз. Это позволяет не запускать useEffect() при каждом повторном рендеринге.

Компонент будет обновляться

С помощью componentWillUpdate():

useEffect(() => {  

console.log("componentWillUpdate"); 

 }, [args]); 

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

Компонент размонтируется

С помощью componentWillUnmount():

useEffect(() => {  

  return () => { 

 console.log("componentWillUnmount"); 

  }; 

 }, [args]);  

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

В заключение,

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

Кроме того, с помощью хука useEffect() у нас есть надежный способ захвата жизненного цикла и методов компонента в наших React-приложениях, независимо от сложных состояний компонентов.

Пожалуйста, дайте мне знать, что вы думаете об информации о useEffect() Hook, есть ли какие-то упущенные концепции или не слишком понятное объяснение useEffect() Hook.