Как использовать хук useEffect React

Узнайте, для чего полезен хук useEffect React и как с ним работать!

Посмотри мойВведение в React Hooksво-первых, если вы новичок в них.

Один хук React, который я иногда использую, этоuseEffect.

import React, { useEffect } from 'react'

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

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

Крючки обеспечиваютuseEffect()API. Вызов принимает функцию в качестве аргумента.

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

Пример:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => { const [count, setCount] = useState(0) const [name, setName] = useState(‘Flavio’)

useEffect(() => { console.log(Hi </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> you clicked </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> times) })

return ( <div> <p> Hi {name} you clicked {count} times </p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={() => setName(name === ‘Flavio’ ? ‘Roger’ : ‘Flavio’)}> Change name </button> </div> ) }

ReactDOM.render( <CounterWithNameAndSideEffect />, document.getElementById(‘app’) )

Такой жеcomponentWillUnmountработа может быть достигнута опциональновозвращениефункция из нашегоuseEffect()параметр:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

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

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

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

Точно так же вы можете указать React выполнить побочный эффект только один раз (во время монтирования), передав пустой массив:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

useEffect()отлично подходит для добавления журналов, доступа к сторонним API и многого другого.

Пример на Codepen:

См. ПероReact Hooks, пример # 3 побочные эффектыАвтор: Флавио Коупс (@flaviocopes) наCodePen.

Tech Wiki Online!