- Почему нельзя просто написать функцию в React?
- Можно, если это чистая функция
- А если нет?
💭Представь, тебе нужно получить погоду через fetch-запрос. Ты пишешь привычную функцию:
function MyComponent() {
const [data, setData] = useState(null);
const fetchData = async () => {
const response = await fetch(url)
const data = await response.json()
setData(data)
};
fetchData()
return <div>Loading...</div>
}1️⃣ В
fetchData обращаемся к серверу за данными.
2️⃣ Мы
обновляем состояние компонента, отдавая данные с помощью
setData.
3️⃣
Компонент отрисовывается со свежими данными.
4️⃣
fetchData вызывается снова.
В результате у нас получается бесконечный цикл !✅
UseEffect 🟣Вызывает функцию в определенные моменты жизни компонента.
🟣Используется после рендеринга, но до того, как он обновляет экран пользователя.
🚩Это значит, что даже если в теле useEffect выполняется долгая операция, пользовательский интерфейс продолжит отображаться без задержек в обновлении.
useEffect(() => {наша функция} , [массив зависимостей])🍳
Массив зависимостей🗑️
Содержит список всех переменных, от которых зависит эффект:
🟣
Пустой массив []Эффект выполнится один раз при монтировании компоненты.
🟣
Пропсы,состояния, контекст
[props
, state, context]Если эти значения изменятся, эффект будет запущен снова. Также сюда можно включить глобальные переменные.
‼️‼️‼️‼️
Перепишем наш запрос для получения погоды:
import { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null)
const fetchData = async () => {
const response = await fetch(url)
const data = await response.json()
setData(data)
}
useEffect(() => {
fetchData()
}, [])
return data ? <div>{data}</div> : <div>Loading...</div>
}*useEffect не может быть async, поэтому вкладываем ее внутрьКак мы решили проблему?1️⃣
Поместили вызов функции в наш хук2️⃣
Задали пустой массив зависимостей, чтобы функция отработала один раз при создании компонента.(Часть 1)
#react
