When should I use useEffect hook instead of event listeners?

Question

Should useEffect hook be used when it can be simplified using an event listener?

For example, in the below snippet code I use event listener to change some state and later useEffect hook to react to that state change and do some other thing

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>
    </>
  );
}

Should I move useEffect logic to the onClick listeners?

They would be doing different things — for example clicking the same button multiple times would not cause anything to happen, whereas moving the fetching logic to the `button` would cause it to fetch every click. Your question more depends what the the desired end result is! — alistair, May 17 '22 at 12:16
you don't need, useEffect on the button click you can call an API set to state. — Rahul Sharma, May 17 '22 at 12:17
I know that I don't need `useEffect` for simple operations I am just asking when is better to use `useEffect` or `event listeners` — Angel, May 17 '22 at 12:32

Giorgi Moniava · Accepted Answer · 2023-02-22T22:01:21.550

Based on the docs if you can do something in event handlers then you should prefer to do them there instead of useEffect:

Docs:

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.

Additionally here is a quote by Dan Abramov:

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.

score 0 · Answer 2 · answered May 17 '22 at 12:18

UseEffect run once when the component does mounting.

You can have state that triger the useEffect .

Should You move useEffect logic to the onClick listeners?

That depend on you, if you need to render your app , so no.

onClick function need do to something that depend to the page logic.

score 0 · Answer 3 · answered May 17 '22 at 12:23

0

You don't need useEffect for simple operations, useEffect will also call on the component mount that you have to handle.

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>
    </>
  );
}

answered May 17 '22 at 12:23

Rahul Sharma

9,534
1
15
37

I know that I don't need `useEffect` for simple operations. I am just asking when is better to use `useEffect` or `event listeners` – Angel May 17 '22 at 12:29
In this case, useEffect does not help, `useEffect` is helpful when something is changing you want to observe that and something you want to trigger on mount/on unmount. – Rahul Sharma May 17 '22 at 12:35

When should I use useEffect hook instead of event listeners?

3 Answers3