0

Я написал лёгкую программу, которая использует useState и useEffect, это просто счётчик времени, который сам себя обновляет каждую секунду. Но я не очень хорошо понимаю зачем нужен useEffect. И даже так, я хотел попробовать написать такой счётчик времени. Я использовал документацию React, и дополнил его этими use...... Объясните пожалуйста значение useEffect и уместно ли использовать его в моём коде?

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

const Clock = () => {
  const [date, setDate] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    setTimeout(() => {
      setDate(new Date().toLocaleTimeString())
    }, 1000)
  })

  return (
    <div>
      <h1>Привет, мир!</h1>
      <h2>Сейчас {date}</h2>
    </div>
  )
}

export default Clock;

(Код работает как надо)

2 ответа 2

3

Использовать useEffect стоит, например, для запросов:

function EffectExample() {
  const [data, setData] = useState({});

  async function takeData() {
    const data = await fetch('какой-нибудь url');
    setData(data);
  }

  useEffect(() => {
    takeData();
  }, []);

  return <div>{JSON.stringify(data)}</div>
}

Здесь, если вызывать takeData без useEffect, произойдет либо бесконечное количество запросов к серверу, либо infinite loop error, так как обновление состояния data будет рендерить компонент заново, что в свою очередь заново вызывет функцию takeData, которая вновь обновит data и так далее до бесконечности. С useEffect же takedData вызывается только один раз после после первого рендера.

5
  • 4
    Не надо так писать useEffect(async() => { . Переместите функцию takeData внутрь useEffect -а.
    – Randall
    11 апр 2021 в 10:01
  • @ИзбытокСусликов, мне кажется стоит оставить как есть, иногда бывают такие ситуации, что нужно вызвать несколько функций в одном useEffect
    – kertAW
    11 апр 2021 в 12:14
  • Нельзя так делать. However, an effect hook should return nothing or a clean up function. That's why using async directly in the useEffect function isn't allowed. github.com/facebook/react/issues/14326, robinwieruch.de/react-hooks-fetch-data
    – entithat
    11 апр 2021 в 12:32
  • @Voprositel, так а нет проблемы их вызывать без useEffect(async () => ...). Сделайте IIFE внутри юзЕффекта и вызывайте хоть 100
    – entithat
    11 апр 2021 в 12:35
  • 1
    @entithat, понятно, поправил, спасибо за объяснение
    – kertAW
    11 апр 2021 в 13:12
3

useEffect - это то, что выполнится сразу после рендера Вашего компонента. Вы запускаете setTimeout после рендера кода, и начинает считаться счетчик, который записывает в useState новую информацию, и она выводится в компоненте.

Все верно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.