Когда я должен использовать хук useEffect вместо прослушивателей событий?

Следует ли использовать хук useEffect, когда его можно упростить с помощью прослушивателя событий?

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

import { useEffect, useState } from "react";

export default function Foo() {
  const [isActive, setIsActive] = useState(true);

  useEffect(() => {
    // do any kind of business logic
  }, [isActive]);

  return (
    <>
      <button
        type="button"
        className="secondary"
        onClick={() => setIsActive(true)}
      >
        ACTIVATE
      </button>
      <button
        type="button"
        className="secondary"
        onClick={() => setIsActive(false)}
      >
        DEACTIVATE
      </button>
    </>
  );
}

Должен ли я перенести useEffect логику на onClick слушателей?

Они будут делать разные вещи — например, многократное нажатие одной и той же кнопки ничего не вызовет, в то время как перенос логики выборки на button приведет к тому, что она будет получать каждый щелчок. Ваш вопрос больше зависит от желаемого конечного результата!

alistair 17.05.2022 14:16

вам не нужно, useEffect при нажатии кнопки вы можете вызвать набор API для состояния.

Rahul Sharma 17.05.2022 14:17

Я знаю, что мне не нужно useEffect для простых операций, я просто спрашиваю, когда лучше использовать useEffect или event listeners

Angel 17.05.2022 14:32
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
2
3
34
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

UseEffect запускается один раз, когда компонент монтируется.

У вас может быть состояние, которое запускает useEffect .

Должны ли вы перенести useEffect логику на onClick слушателей?

Это зависит от вас, если вам нужно render ваше приложение, так что нет.

Функция onClick должна делать что-то, что зависит от логики страницы.

Вам не нужно useEffect для простых операций, useEffect также вызовет монтирование компонента, с которым вам нужно справиться.

export default function Foo() {
  const onClick = useCallback((isActive) => {
    // fetch some data
    // set that data to state
  }, []);

  return (
    <>
      <button type="button" className="secondary" onClick={() => onClick(true)}>
        ACTIVATE
      </button>
      <button
        type="button"
        className="secondary"
        onClick={() => onClick(false)}
      >
        DEACTIVATE
      </button>
    </>
  );
}

Я знаю, что мне не нужно useEffect для простых операций. Я просто спрашиваю, когда лучше использовать useEffect или event listeners

Angel 17.05.2022 14:29

В этом случае useEffect не помогает, useEffect помогает, когда что-то меняется, и вы хотите это наблюдать, и что-то, что вы хотите вызвать при монтировании/размонтировании.

Rahul Sharma 17.05.2022 14:35
Ответ принят как подходящий

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

In React, side effects usually belong inside event handlers. Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined inside your component, they don’t run during rendering! So event handlers don’t need to be pure.

If you’ve exhausted all other options and can’t find the right event handler for your side effect, you can still attach it to your returned JSX with a useEffect call in your component. This tells React to execute it later, after rendering, when side effects are allowed. However, this approach should be your last resort.

Также связанная цитата Дэна Абрамова:

To sum up, if something happens because a user did something, useEffect might not be the best tool.

On the other hand, if an effect merely synchronizes something (Google Map coordinates on a widget) to the current state, useEffect is a good tool. And it can safely over-fire.

Другие вопросы по теме