Is there a reason to use useEffect without dependency array?

Question

So, when we use useEffect without a dependancy array, it happens on every render.

But that's what would happen if I just wrote the code directly into the component. So is there a reason to use it?

One thing I can think of is doing something with the cleanup function, but I can't think up a valid usecase.

But that's what would happen if I just wrote the code directly into the component is not correct. useEffect functions run AFTER a render, not DURING. — Derek
– Derek, Commented Nov 15, 2020 at 0:48
A valid use is to use setTimeout and then run clearTimeout in the cleanup function (which takes effect when the component unmounts). The official React docs show another example: reactjs.org/docs/hooks-effect.html#effects-with-cleanup — Ed Lucas
– Ed Lucas, Commented Nov 15, 2020 at 1:07
Does this answer your question? Why would we use useEffect without a dependency array? — jaybhatt
– jaybhatt, Commented May 16, 2021 at 9:43

BraisC · Accepted Answer · 2021-05-16 09:40:03Z

7

But that's what would happen if I just wrote the code directly into the component.

Actually, that is not entirely true.

For example if you update a useState to the same value, React will reevaluate the function component but will not trigger effects, it will cause the code outside useEffect to execute, but not the one inside useEffect.

This is said in the official docs, Bailing out of a state update

And this is an example of the matter.

answered May 16, 2021 at 9:40

BraisC

3094 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gayatri Dipali · Accepted Answer · 2020-11-15 03:38:02Z

The thing is both a i.e, a normal JS-function and a useEffect without any dependency does the same work but the difference is that :

useEffect is only accessible in a React code not normal JS. It has more power in terms of react. Hence, Hooks scope is limited to the React code world.
In the class-based components, the Hooks won't work but regular functions will.
React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates but the same might not be true in other cases.(Important)
By default, effects run after every completed render, but you can choose to fire them only when certain values have changed but this is not something that's easy with normal JS-functions (Just an side advantage apart from the question)

Collectives™ on Stack Overflow

Is there a reason to use useEffect without dependency array?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related