- Почему нельзя просто написать функцию в 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