The useEffect callback runs whenever the states we’re watching are updated, when a re-rendering is done, or when the component mounts.

However, sometimes, we may want to make it run only after the initial render is done.

In this article, we’ll look at how to make the useEffect hook callback run only after the first render.

Make the useEffect Hook Not Run on Initial Render

We can make the useEffect hook not run on initial render by creating a variable with useRef hook to keep tracking of when the first render is done.

We set the variable’s value to true initially.

Then we the component is rendered the first time, we set the variable to false .

#javascript