When to use the useEffect();

When to use the useEffect();

A react poem to remember.

"Most of us forget the basics and wonder why the specifics do not work."

- Garrison Wynn

Basics

Understanding "side effect" in React

In the realm of computer science, an operation (or a function) that changes the state variables outside its local environment is said to have a side effect. Here's a simple example to help you understand:

const phraseChanger = () => {
    myCatchPhrase = "Hey, I poop 💩";
    // some other stuff
}
let myCatchPhrase = "Hey, I sing 🎶";

console.log(myCatchPhrase); // Hey, I sing 🎶
phraseChanger();
console.log(myCatchPhrase); // Hey, I poop 💩
  • Here, myCatchPhrase is a global variable.

  • The function phraseChanger() is changing the value of myCatchPhrase which is outside of its local scope apart from doing some other stuff.

  • So we say that the function phraseChanger() has a "side effect".

Understanding "Effects" in React

  • What's an Effect in React?
    Effects are basically "side effects" that are caused by rendering. You as a programmer can specify what these Effects could be. “Rendering” is nothing but React calling your components.

  • Event v/s Effect
    Think of an event as something that a user does voluntarily when they visit your page. Like, clicking a button is an event. But setting up a server connection when the user visits your page is an Effect. Because it needs to happen regardless of any voluntary action by the user.

  • When do Effects run?
    Effects run at the end of the rendering process after the screen updates.
    (Check out the beautifully written article to know more about the rendering process later)

When to use and not to use the useEffect()?

When to use useEffect(),
Is a question worth exploring,
For it's a tool in React's kit,
That's used for side effects storing.

When state changes must be tracked,
Or API calls must be made,
useEffect() is what you need,
To manage them without a parade.

If document title must change,
Or an event must be subscribed,
useEffect() is the way to go,
To keep your code described.

But when not to use useEffect(),
Is a question just as vital,
For overuse can lead to bugs,
That can be hard to settle.

When data doesn't change much,
Or when it's not relevant,
useEffect() can be skipped,
To keep the code more elegant.

And when dependencies aren't clear,
Or when they're not well defined,
useEffect() can cause confusion,
And leave you in a bind.

So use useEffect() when needed,
But use it with care and thought,
For it's a powerful tool indeed,
That can help your code be wrought.

Conclusion

Hope this article (and the poem) made you understand when to use the useEffect() hook in React.
Next popular question: "How to use the useEffect() hook?"
Will be answering it in my next post.
Make sure to like the article and comment if you have any queries or thoughts. See you soon 😊

Did you find this article valuable?

Support Sudarshan MG by becoming a sponsor. Any amount is appreciated!