useEffect hook is used to perform side effects using very few lines of code.

useEffect tells the component what to do after it renders. The most common use case of useEffect is data fetching though we'll not learn how to data fetch in this blog.

There are 3 main variations of this hook:

1. On Every Render

import React, { useState, useEffect } from "react";

export default function App() {
  const [name, setName] = useState("");

  // on every render
  useEffect(() => {
    console.log("Rendering on every render");
  });

  return (
    <div className="App">
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

Here we have an input that has an onChange event that changes the state of name every time a word is typed. Try out in CodeSandBox

As you can see it runs when the page loads and also after every render that happens after that. So it basically runs every time a component is rendered.

But running useEffect on every render can be expensive and can lead to performance issues. Then the second variation of useEffect comes into place.

2. On First Render

import React, { useState, useEffect } from "react";

export default function App() {
  const [name, setName] = useState("");

  // // on first render
  useEffect(() => {
    console.log("Rendered only on first render");
  }, []);

  return (
    <div className="App">
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

Try out in CodeSandBox

Now what it does is it only runs when the component first renders and does not run on every render.

We basically need to add an empty dependency array [] in order for it to only run once when the component is first rendered.

useEffect(() => {
    console.log("Rendered only on first render");
}, []);

3. On first render + whenever the dependency changes

import React, { useState, useEffect } from "react";

export default function App() {
  const [name, setName] = useState("");

  // // on first render + whenever dependency changes
  useEffect(() => {
    console.log("Renders on first render and whenever the dependency changes");
  }, [name]);

  return (
    <div className="App">
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

Try out in CodeSandBox

This variation runs when the component first renders and when the passed variable in the dependency array changes. In this case, the passed variable is the name. Whenever we change something in input it updates the name state and hence triggers the hook.

It also has a cleanup function that is a little complicated so it is not included in this blog. Will make a separate blog explaining just that.

Resources I used for this blog

• Learn the React useEffect Hook in 24 minutes (for beginners)
• Using the Effect Hook – React

Hope you found it helpful and got to learn something❤️

My socials Twitter Github