# React useEffect Explained: When Effects Execute

%%[kempo] 

React's `useEffect` hook is an important tool for managing side effects in your functional components.

In this post, we'll look at *when* your effects run.

## Effects run on the initial render

Every effect runs *at least* once when your component first renders. In the example below, the log statement in the `useEffect` hook executes without you having to do anything:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX3N4bzZra3B0dTdoNjd1em05YTNjZWZyYyIsIm5hbWUiOiJSZWFjdCB1c2VFZmZlY3QgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG59XG5cbmgxIHtcbiAgZm9udC1zaXplOiAxLjVyZW07XG59In0sIi9BcHAuanMiOnsiY29kZSI6ImltcG9ydCB7IHVzZUVmZmVjdCB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc29sZS5sb2coXCJJbml0aWFsIFJlbmRlclwiKTtcbiAgfSwgW10pO1xuXG4gIHJldHVybiA8aDE+SGVsbG8gdXNlRWZmZWN0ITwvaDE+O1xufVxuIn0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gXCJyZWFjdC1kb20vY2xpZW50XCI7XG5pbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuaW1wb3J0IEFwcCBmcm9tIFwiLi9BcHBcIjtcblxuY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpKTtcbnJvb3QucmVuZGVyKDxBcHAgLz4pO1xuIn0sIi9wdWJsaWMvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBsYW5nPVwiZW5cIj5cbiAgPGhlYWQ+XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI+XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPlxuICA8L2hlYWQ+XG4gIDxib2R5PlxuICAgIDxkaXYgaWQ9XCJyb290XCI+PC9kaXY+XG4gIDwvYm9keT5cbjwvaHRtbD4ifSwiL3BhY2thZ2UuanNvbiI6eyJjb2RlIjoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LXNjcmlwdHNcIjogXCJeNS4wLjBcIlxuICB9LFxuICBcIm1haW5cIjogXCIvaW5kZXguanNcIixcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge31cbn0ifX0sInRlbXBsYXRlIjoicmVhY3QifSwiZGlzcGxheSI6eyJjb21wb25lbnRzIjp7IkVkaXRvciI6eyJ0eXBlIjoiZWRpdG9yIiwiZGF0YSI6eyJzaG93VGFicyI6dHJ1ZSwic2hvd0xpbmVOdW1iZXJzIjp0cnVlLCJzaG93SW5saW5lRXJyb3JzIjpmYWxzZSwic2hvd1J1bkJ1dHRvbiI6dHJ1ZSwid3JhcENvbnRlbnQiOnRydWUsImNsb3NhYmxlVGFicyI6dHJ1ZSwicmVhZE9ubHkiOmZhbHNlLCJzaG93UmVhZE9ubHkiOmZhbHNlfX0sIlByZXZpZXciOnsidHlwZSI6InByZXZpZXciLCJkYXRhIjp7InNob3dOYXZpZ2F0b3IiOmZhbHNlLCJzaG93T3BlbkluQ29kZVNhbmRib3giOmZhbHNlLCJzaG93UmVmcmVzaEJ1dHRvbiI6dHJ1ZSwic2hvd1NhbmRwYWNrRXJyb3JPdmVybGF5IjpmYWxzZX19LCJDb25zb2xlIjp7InR5cGUiOiJjb25zb2xlIiwiZGF0YSI6eyJzaG93SGVhZGVyIjpmYWxzZSwic2hvd1N5bnRheEVycm9yIjpmYWxzZSwic2hvd1NldHVwUHJvZ3Jlc3MiOmZhbHNlLCJtYXhNZXNzYWdlQ291bnQiOjEwLCJyZXNldE9uUHJldmlld1Jlc3RhcnQiOmZhbHNlLCJzdGFuZGFsb25lIjpmYWxzZX19fSwiZ2VuZXJhbCI6eyJ2aXNpYmxlRmlsZXMiOlsiL0FwcC5qcyJdLCJ0aGVtZSI6ImtlbXBvRGFyayJ9LCJsYXlvdXRzIjp7InNtYWxsIjoiJ0VkaXRvciBFZGl0b3InXG4nUHJldmlldyBDb25zb2xlJyJ9fX0=" height="750px" width="100%"></iframe>

## Effects run every render if there are no dependencies

In the previous example, we passed an empty array as the second argument to the `useEffect` hook. This argument is called the **dependency array**. The array controls *when* the effect runs after the first render.

If you don't pass a second argument to the `useEffect` hook, your effect will run on *every* render. In the example below, the log statement runs every time you click the **Force Rerender** button:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX3N4bzZra3B0dTdoNjd1em05YTNjZWZyYyIsIm5hbWUiOiJSZWFjdCB1c2VFZmZlY3QgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG59XG5cbmJ1dHRvbiB7XG4gIC0tYjogM3B4OyAvKiBib3JkZXIgdGhpY2tuZXNzICovXG4gIC0tczogMC40NWVtOyAvKiBzaXplIG9mIHRoZSBjb3JuZXIgKi9cbiAgLS1jb2xvcjogIzM3M2I0NDtcblxuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHBhZGRpbmc6IGNhbGMoMC41ZW0gKyB2YXIoLS1zKSkgY2FsYygwLjllbSArIHZhcigtLXMpKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgLS1fcDogdmFyKC0tcyk7XG4gIGJhY2tncm91bmQ6IGNvbmljLWdyYWRpZW50KFxuICAgICAgZnJvbSA5MGRlZyBhdCB2YXIoLS1iKSB2YXIoLS1iKSxcbiAgICAgICMwMDAwIDkwZGVnLFxuICAgICAgdmFyKC0tY29sb3IpIDBcbiAgICApXG4gICAgdmFyKC0tX3ApIHZhcigtLV9wKSAvIGNhbGMoMTAwJSAtIHZhcigtLWIpIC0gMiAqIHZhcigtLV9wKSlcbiAgICBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpO1xuICB0cmFuc2l0aW9uOlxuICAgIDAuM3MgbGluZWFyLFxuICAgIGNvbG9yIDBzLFxuICAgIGJhY2tncm91bmQtY29sb3IgMHM7XG4gIG91dGxpbmU6IHZhcigtLWIpIHNvbGlkICMwMDAwO1xuICBvdXRsaW5lLW9mZnNldDogMC42ZW07XG4gIGZvbnQtc2l6ZTogMTZweDtcblxuICBib3JkZXI6IDA7XG5cbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIC13ZWJraXQtdXNlci1zZWxlY3Q6IG5vbmU7XG4gIHRvdWNoLWFjdGlvbjogbWFuaXB1bGF0aW9uO1xufVxuXG5idXR0b246aG92ZXIsXG5idXR0b246Zm9jdXMtdmlzaWJsZSB7XG4gIC0tX3A6IDBweDtcbiAgb3V0bGluZS1jb2xvcjogdmFyKC0tY29sb3IpO1xuICBvdXRsaW5lLW9mZnNldDogMC4wNWVtO1xufVxuXG5idXR0b246YWN0aXZlIHtcbiAgYmFja2dyb3VuZDogdmFyKC0tY29sb3IpO1xuICBjb2xvcjogI2ZmZjtcbn1cbiJ9LCIvQXBwLmpzIjp7ImNvZGUiOiJpbXBvcnQgeyB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVJlcmVuZGVyIH0gZnJvbSBcIi4vdXRpbHNcIjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQXBwKCkge1xuICBjb25zdCByZXJlbmRlciA9IHVzZVJlcmVuZGVyKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zb2xlLmxvZyhcIkV2ZXJ5IFJlbmRlclwiKTtcbiAgfSk7XG5cbiAgcmV0dXJuIDxidXR0b24gb25DbGljaz17cmVyZW5kZXJ9PkZvcmNlIFJlcmVuZGVyPC9idXR0b24+O1xufVxuIn0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gXCJyZWFjdC1kb20vY2xpZW50XCI7XG5pbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuaW1wb3J0IEFwcCBmcm9tIFwiLi9BcHBcIjtcblxuY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpKTtcbnJvb3QucmVuZGVyKDxBcHAgLz4pO1xuIn0sIi9wdWJsaWMvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBsYW5nPVwiZW5cIj5cbiAgPGhlYWQ+XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI+XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPlxuICA8L2hlYWQ+XG4gIDxib2R5PlxuICAgIDxkaXYgaWQ9XCJyb290XCI+PC9kaXY+XG4gIDwvYm9keT5cbjwvaHRtbD4ifSwiL3BhY2thZ2UuanNvbiI6eyJjb2RlIjoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LXNjcmlwdHNcIjogXCJeNS4wLjBcIlxuICB9LFxuICBcIm1haW5cIjogXCIvaW5kZXguanNcIixcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge31cbn0ifSwiL3V0aWxzLmpzIjp7ImNvZGUiOiJpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgY29uc3QgdXNlUmVyZW5kZXIgPSAoKSA9PiB7XG4gIGNvbnN0IFtzdGF0ZSwgc2V0U3RhdGVdID0gdXNlU3RhdGUoMCk7XG4gIHJldHVybiAoKSA9PiBzZXRTdGF0ZShzdGF0ZSArIDEpO1xufTtcbiJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjp0cnVlLCJzaG93U2FuZHBhY2tFcnJvck92ZXJsYXkiOmZhbHNlfX0sIkNvbnNvbGUiOnsidHlwZSI6ImNvbnNvbGUiLCJkYXRhIjp7InNob3dIZWFkZXIiOmZhbHNlLCJzaG93U3ludGF4RXJyb3IiOmZhbHNlLCJzaG93U2V0dXBQcm9ncmVzcyI6ZmFsc2UsIm1heE1lc3NhZ2VDb3VudCI6MTAsInJlc2V0T25QcmV2aWV3UmVzdGFydCI6ZmFsc2UsInN0YW5kYWxvbmUiOmZhbHNlfX19LCJnZW5lcmFsIjp7InZpc2libGVGaWxlcyI6WyIvQXBwLmpzIl0sInRoZW1lIjoia2VtcG9EYXJrIn0sImxheW91dHMiOnsic21hbGwiOiInRWRpdG9yIEVkaXRvcidcbidQcmV2aWV3IENvbnNvbGUnIn19fQ==" height="750px" width="100%"></iframe>

## Effects run when dependencies change

If you want to be more selective about when your effect runs, you need to use the dependency array argument. The way it works is that the values in the dependency array are compared *every* render. If a value at a given position changes, the effect is executed again.

Let's take a look at an example:

```javascript
// First render
useEffect(() => {}, [1, 2]);

// Second render
useEffect(() => {}, [1, 3]);
```

1. Dependency array on the first render: `[1, 2]`
    
2. Dependency array on the second render: `[1, 3]`
    

The first element (`1`) is the same between renders, but the second element (`2` and `3`) is different. The effect is re-executed because the value changed for the second element in the dependency array.

In the example below, we have a `count` variable managed by React state. Every time you click the Count button, the value is incremented, and the component re-renders.

Since the `count` variable passed to the `useEffect` dependency array changes between renders, the log statement will run.

Now what if we click the **Force Rerender** button instead?

This button *doesn't* update the `count` variable. Even though the component re-renders, the value passed to the `useEffect` dependency array is the same. In this case, the log statement *won't* run.

Try it out!

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX3N4bzZra3B0dTdoNjd1em05YTNjZWZyYyIsIm5hbWUiOiJSZWFjdCB1c2VFZmZlY3QgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG59XG5cbmRpdiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xufVxuXG5idXR0b24ge1xuICAtLWI6IDNweDsgLyogYm9yZGVyIHRoaWNrbmVzcyAqL1xuICAtLXM6IDAuNDVlbTsgLyogc2l6ZSBvZiB0aGUgY29ybmVyICovXG4gIC0tY29sb3I6ICMzNzNiNDQ7XG5cbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiBjYWxjKDAuNWVtICsgdmFyKC0tcykpIGNhbGMoMC45ZW0gKyB2YXIoLS1zKSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvcik7XG4gIC0tX3A6IHZhcigtLXMpO1xuICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChcbiAgICAgIGZyb20gOTBkZWcgYXQgdmFyKC0tYikgdmFyKC0tYiksXG4gICAgICAjMDAwMCA5MGRlZyxcbiAgICAgIHZhcigtLWNvbG9yKSAwXG4gICAgKVxuICAgIHZhcigtLV9wKSB2YXIoLS1fcCkgLyBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpXG4gICAgY2FsYygxMDAlIC0gdmFyKC0tYikgLSAyICogdmFyKC0tX3ApKTtcbiAgdHJhbnNpdGlvbjpcbiAgICAwLjNzIGxpbmVhcixcbiAgICBjb2xvciAwcyxcbiAgICBiYWNrZ3JvdW5kLWNvbG9yIDBzO1xuICBvdXRsaW5lOiB2YXIoLS1iKSBzb2xpZCAjMDAwMDtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuNmVtO1xuICBmb250LXNpemU6IDE2cHg7XG5cbiAgYm9yZGVyOiAwO1xuXG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbn1cblxuYnV0dG9uOmhvdmVyLFxuYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICAtLV9wOiAwcHg7XG4gIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuMDVlbTtcbn1cblxuYnV0dG9uOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWNvbG9yKTtcbiAgY29sb3I6ICNmZmY7XG59XG4ifSwiL0FwcC5qcyI6eyJjb2RlIjoiaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlUmVyZW5kZXIgfSBmcm9tIFwiLi91dGlsc1wiO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIGNvbnN0IHJlcmVuZGVyID0gdXNlUmVyZW5kZXIoKTtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnNvbGUubG9nKGBDb3VudDogJHtjb3VudH1gKTtcbiAgfSwgW2NvdW50XSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtyZXJlbmRlcn0+Rm9yY2UgUmVyZW5kZXI8L2J1dHRvbj5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q291bnQge2NvdW50fTwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuIn0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gXCJyZWFjdC1kb20vY2xpZW50XCI7XG5pbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuaW1wb3J0IEFwcCBmcm9tIFwiLi9BcHBcIjtcblxuY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpKTtcbnJvb3QucmVuZGVyKDxBcHAgLz4pO1xuIn0sIi9wdWJsaWMvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBsYW5nPVwiZW5cIj5cbiAgPGhlYWQ+XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI+XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPlxuICA8L2hlYWQ+XG4gIDxib2R5PlxuICAgIDxkaXYgaWQ9XCJyb290XCI+PC9kaXY+XG4gIDwvYm9keT5cbjwvaHRtbD4ifSwiL3BhY2thZ2UuanNvbiI6eyJjb2RlIjoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LXNjcmlwdHNcIjogXCJeNS4wLjBcIlxuICB9LFxuICBcIm1haW5cIjogXCIvaW5kZXguanNcIixcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge31cbn0ifSwiL3V0aWxzLmpzIjp7ImNvZGUiOiJpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgY29uc3QgdXNlUmVyZW5kZXIgPSAoKSA9PiB7XG4gIGNvbnN0IFtzdGF0ZSwgc2V0U3RhdGVdID0gdXNlU3RhdGUoMCk7XG4gIHJldHVybiAoKSA9PiBzZXRTdGF0ZShzdGF0ZSArIDEpO1xufTtcbiJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjp0cnVlLCJzaG93U2FuZHBhY2tFcnJvck92ZXJsYXkiOmZhbHNlfX0sIkNvbnNvbGUiOnsidHlwZSI6ImNvbnNvbGUiLCJkYXRhIjp7InNob3dIZWFkZXIiOmZhbHNlLCJzaG93U3ludGF4RXJyb3IiOmZhbHNlLCJzaG93U2V0dXBQcm9ncmVzcyI6ZmFsc2UsIm1heE1lc3NhZ2VDb3VudCI6MTAsInJlc2V0T25QcmV2aWV3UmVzdGFydCI6ZmFsc2UsInN0YW5kYWxvbmUiOmZhbHNlfX19LCJnZW5lcmFsIjp7InZpc2libGVGaWxlcyI6WyIvQXBwLmpzIl0sInRoZW1lIjoia2VtcG9EYXJrIn0sImxheW91dHMiOnsic21hbGwiOiInRWRpdG9yIEVkaXRvcidcbidQcmV2aWV3IENvbnNvbGUnIn19fQ==" height="750px" width="100%"></iframe>

### Non-primitive data types are compared by reference

One thing to keep in mind is that any non-primitive data type passed to a dependency array is compared by its reference.

This means that even if a value *looks* the same, if the underlying reference changes, React will execute the effect.

For example, the two functions below may *look* the same, but from JavaScript's perspective, they have two different function references:

```javascript
const fnOne = () => true;
const fnTwo = () => true;
fnOne === fnTwo // false (different references)
```

Here are a few data types where this applies:

* Functions
    
* Objects
    
* Arrays
    

We can see this play out in the example below.

Since the `logger` function is recreated *every* render, the underlying reference will be different.

This time, since we pass the `logger` in the dependency array, the **Force Rerender** button *will* cause the log statement to run again:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX3N4bzZra3B0dTdoNjd1em05YTNjZWZyYyIsIm5hbWUiOiJSZWFjdCB1c2VFZmZlY3QgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG59XG5cbmRpdiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xufVxuXG5idXR0b24ge1xuICAtLWI6IDNweDsgLyogYm9yZGVyIHRoaWNrbmVzcyAqL1xuICAtLXM6IDAuNDVlbTsgLyogc2l6ZSBvZiB0aGUgY29ybmVyICovXG4gIC0tY29sb3I6ICMzNzNiNDQ7XG5cbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiBjYWxjKDAuNWVtICsgdmFyKC0tcykpIGNhbGMoMC45ZW0gKyB2YXIoLS1zKSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvcik7XG4gIC0tX3A6IHZhcigtLXMpO1xuICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChcbiAgICAgIGZyb20gOTBkZWcgYXQgdmFyKC0tYikgdmFyKC0tYiksXG4gICAgICAjMDAwMCA5MGRlZyxcbiAgICAgIHZhcigtLWNvbG9yKSAwXG4gICAgKVxuICAgIHZhcigtLV9wKSB2YXIoLS1fcCkgLyBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpXG4gICAgY2FsYygxMDAlIC0gdmFyKC0tYikgLSAyICogdmFyKC0tX3ApKTtcbiAgdHJhbnNpdGlvbjpcbiAgICAwLjNzIGxpbmVhcixcbiAgICBjb2xvciAwcyxcbiAgICBiYWNrZ3JvdW5kLWNvbG9yIDBzO1xuICBvdXRsaW5lOiB2YXIoLS1iKSBzb2xpZCAjMDAwMDtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuNmVtO1xuICBmb250LXNpemU6IDE2cHg7XG5cbiAgYm9yZGVyOiAwO1xuXG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbn1cblxuYnV0dG9uOmhvdmVyLFxuYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICAtLV9wOiAwcHg7XG4gIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuMDVlbTtcbn1cblxuYnV0dG9uOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWNvbG9yKTtcbiAgY29sb3I6ICNmZmY7XG59XG4ifSwiL0FwcC5qcyI6eyJjb2RlIjoiaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlUmVyZW5kZXIgfSBmcm9tIFwiLi91dGlsc1wiO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIGNvbnN0IHJlcmVuZGVyID0gdXNlUmVyZW5kZXIoKTtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICBjb25zdCBsb2dnZXIgPSAoKSA9PiBjb25zb2xlLmxvZyhgQ291bnQ6ICR7Y291bnR9YCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBsb2dnZXIoKTtcbiAgfSwgW2NvdW50LCBsb2dnZXJdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e3JlcmVuZGVyfT5Gb3JjZSBSZXJlbmRlcjwvYnV0dG9uPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5Db3VudCB7Y291bnR9PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG4ifSwiL2luZGV4LmpzIjp7ImNvZGUiOiJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVSb290IH0gZnJvbSBcInJlYWN0LWRvbS9jbGllbnRcIjtcbmltcG9ydCBcIi4vc3R5bGVzLmNzc1wiO1xuXG5pbXBvcnQgQXBwIGZyb20gXCIuL0FwcFwiO1xuXG5jb25zdCByb290ID0gY3JlYXRlUm9vdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJvb3RcIikpO1xucm9vdC5yZW5kZXIoPEFwcCAvPik7XG4ifSwiL3B1YmxpYy9pbmRleC5odG1sIjp7ImNvZGUiOiI8IURPQ1RZUEUgaHRtbD5cbjxodG1sIGxhbmc9XCJlblwiPlxuICA8aGVhZD5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5Eb2N1bWVudDwvdGl0bGU+XG4gIDwvaGVhZD5cbiAgPGJvZHk+XG4gICAgPGRpdiBpZD1cInJvb3RcIj48L2Rpdj5cbiAgPC9ib2R5PlxuPC9odG1sPiJ9LCIvcGFja2FnZS5qc29uIjp7ImNvZGUiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcInJlYWN0XCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3Qtc2NyaXB0c1wiOiBcIl41LjAuMFwiXG4gIH0sXG4gIFwibWFpblwiOiBcIi9pbmRleC5qc1wiLFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7fVxufSJ9LCIvdXRpbHMuanMiOnsiY29kZSI6ImltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5cbmV4cG9ydCBjb25zdCB1c2VSZXJlbmRlciA9ICgpID0+IHtcbiAgY29uc3QgW3N0YXRlLCBzZXRTdGF0ZV0gPSB1c2VTdGF0ZSgwKTtcbiAgcmV0dXJuICgpID0+IHNldFN0YXRlKHN0YXRlICsgMSk7XG59O1xuIn19LCJ0ZW1wbGF0ZSI6InJlYWN0In0sImRpc3BsYXkiOnsiY29tcG9uZW50cyI6eyJFZGl0b3IiOnsidHlwZSI6ImVkaXRvciIsImRhdGEiOnsic2hvd1RhYnMiOnRydWUsInNob3dMaW5lTnVtYmVycyI6dHJ1ZSwic2hvd0lubGluZUVycm9ycyI6ZmFsc2UsInNob3dSdW5CdXR0b24iOnRydWUsIndyYXBDb250ZW50Ijp0cnVlLCJjbG9zYWJsZVRhYnMiOnRydWUsInJlYWRPbmx5IjpmYWxzZSwic2hvd1JlYWRPbmx5IjpmYWxzZX19LCJQcmV2aWV3Ijp7InR5cGUiOiJwcmV2aWV3IiwiZGF0YSI6eyJzaG93TmF2aWdhdG9yIjpmYWxzZSwic2hvd09wZW5JbkNvZGVTYW5kYm94IjpmYWxzZSwic2hvd1JlZnJlc2hCdXR0b24iOnRydWUsInNob3dTYW5kcGFja0Vycm9yT3ZlcmxheSI6ZmFsc2V9fSwiQ29uc29sZSI6eyJ0eXBlIjoiY29uc29sZSIsImRhdGEiOnsic2hvd0hlYWRlciI6ZmFsc2UsInNob3dTeW50YXhFcnJvciI6ZmFsc2UsInNob3dTZXR1cFByb2dyZXNzIjpmYWxzZSwibWF4TWVzc2FnZUNvdW50IjoxMCwicmVzZXRPblByZXZpZXdSZXN0YXJ0IjpmYWxzZSwic3RhbmRhbG9uZSI6ZmFsc2V9fX0sImdlbmVyYWwiOnsidmlzaWJsZUZpbGVzIjpbIi9BcHAuanMiXSwidGhlbWUiOiJrZW1wb0RhcmsifSwibGF5b3V0cyI6eyJzbWFsbCI6IidFZGl0b3IgRWRpdG9yJ1xuJ1ByZXZpZXcgQ29uc29sZScifX19" height="750px" width="100%"></iframe>

### Create stable references to prevent effects from running

We can pass stable references to our dependency arrays to solve this problem.

For functions that are created in a React component, this usually means wrapping it with the `useCallback` hook.

The `useCallback` hook takes a function as its first argument and a dependency array as the second argument. On the initial render, a new function is created. However, every other render will return the **same** function if the elements in the dependency array are the same.

The `useCallback` dependency array follows the same rules as the `useEffect` dependency array.

This time the `logger` function is wrapped with the `useCallback` hook, so we get a stable reference between renders and the **Force Rerender** button *won't* cause the log statement to run again:

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX3N4bzZra3B0dTdoNjd1em05YTNjZWZyYyIsIm5hbWUiOiJSZWFjdCB1c2VFZmZlY3QgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG59XG5cbmRpdiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xufVxuXG5idXR0b24ge1xuICAtLWI6IDNweDsgLyogYm9yZGVyIHRoaWNrbmVzcyAqL1xuICAtLXM6IDAuNDVlbTsgLyogc2l6ZSBvZiB0aGUgY29ybmVyICovXG4gIC0tY29sb3I6ICMzNzNiNDQ7XG5cbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiBjYWxjKDAuNWVtICsgdmFyKC0tcykpIGNhbGMoMC45ZW0gKyB2YXIoLS1zKSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvcik7XG4gIC0tX3A6IHZhcigtLXMpO1xuICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChcbiAgICAgIGZyb20gOTBkZWcgYXQgdmFyKC0tYikgdmFyKC0tYiksXG4gICAgICAjMDAwMCA5MGRlZyxcbiAgICAgIHZhcigtLWNvbG9yKSAwXG4gICAgKVxuICAgIHZhcigtLV9wKSB2YXIoLS1fcCkgLyBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpXG4gICAgY2FsYygxMDAlIC0gdmFyKC0tYikgLSAyICogdmFyKC0tX3ApKTtcbiAgdHJhbnNpdGlvbjpcbiAgICAwLjNzIGxpbmVhcixcbiAgICBjb2xvciAwcyxcbiAgICBiYWNrZ3JvdW5kLWNvbG9yIDBzO1xuICBvdXRsaW5lOiB2YXIoLS1iKSBzb2xpZCAjMDAwMDtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuNmVtO1xuICBmb250LXNpemU6IDE2cHg7XG5cbiAgYm9yZGVyOiAwO1xuXG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbn1cblxuYnV0dG9uOmhvdmVyLFxuYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICAtLV9wOiAwcHg7XG4gIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuMDVlbTtcbn1cblxuYnV0dG9uOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWNvbG9yKTtcbiAgY29sb3I6ICNmZmY7XG59XG4ifSwiL0FwcC5qcyI6eyJjb2RlIjoiaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVJlcmVuZGVyIH0gZnJvbSBcIi4vdXRpbHNcIjtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQXBwKCkge1xuICBjb25zdCByZXJlbmRlciA9IHVzZVJlcmVuZGVyKCk7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgY29uc3QgbG9nZ2VyID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNvbnNvbGUubG9nKGBDb3VudDogJHtjb3VudH1gKTtcbiAgfSwgW2NvdW50XSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBsb2dnZXIoKTtcbiAgfSwgW2NvdW50LCBsb2dnZXJdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e3JlcmVuZGVyfT5Gb3JjZSBSZXJlbmRlcjwvYnV0dG9uPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5Db3VudCB7Y291bnR9PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG4ifSwiL2luZGV4LmpzIjp7ImNvZGUiOiJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVSb290IH0gZnJvbSBcInJlYWN0LWRvbS9jbGllbnRcIjtcbmltcG9ydCBcIi4vc3R5bGVzLmNzc1wiO1xuXG5pbXBvcnQgQXBwIGZyb20gXCIuL0FwcFwiO1xuXG5jb25zdCByb290ID0gY3JlYXRlUm9vdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJvb3RcIikpO1xucm9vdC5yZW5kZXIoPEFwcCAvPik7XG4ifSwiL3B1YmxpYy9pbmRleC5odG1sIjp7ImNvZGUiOiI8IURPQ1RZUEUgaHRtbD5cbjxodG1sIGxhbmc9XCJlblwiPlxuICA8aGVhZD5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5Eb2N1bWVudDwvdGl0bGU+XG4gIDwvaGVhZD5cbiAgPGJvZHk+XG4gICAgPGRpdiBpZD1cInJvb3RcIj48L2Rpdj5cbiAgPC9ib2R5PlxuPC9odG1sPiJ9LCIvcGFja2FnZS5qc29uIjp7ImNvZGUiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcInJlYWN0XCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3QtZG9tXCI6IFwiXjE4LjAuMFwiLFxuICAgIFwicmVhY3Qtc2NyaXB0c1wiOiBcIl41LjAuMFwiXG4gIH0sXG4gIFwibWFpblwiOiBcIi9pbmRleC5qc1wiLFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7fVxufSJ9LCIvdXRpbHMuanMiOnsiY29kZSI6ImltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5cbmV4cG9ydCBjb25zdCB1c2VSZXJlbmRlciA9ICgpID0+IHtcbiAgY29uc3QgW3N0YXRlLCBzZXRTdGF0ZV0gPSB1c2VTdGF0ZSgwKTtcbiAgcmV0dXJuICgpID0+IHNldFN0YXRlKHN0YXRlICsgMSk7XG59O1xuIn19LCJ0ZW1wbGF0ZSI6InJlYWN0In0sImRpc3BsYXkiOnsiY29tcG9uZW50cyI6eyJFZGl0b3IiOnsidHlwZSI6ImVkaXRvciIsImRhdGEiOnsic2hvd1RhYnMiOnRydWUsInNob3dMaW5lTnVtYmVycyI6dHJ1ZSwic2hvd0lubGluZUVycm9ycyI6ZmFsc2UsInNob3dSdW5CdXR0b24iOnRydWUsIndyYXBDb250ZW50Ijp0cnVlLCJjbG9zYWJsZVRhYnMiOnRydWUsInJlYWRPbmx5IjpmYWxzZSwic2hvd1JlYWRPbmx5IjpmYWxzZX19LCJQcmV2aWV3Ijp7InR5cGUiOiJwcmV2aWV3IiwiZGF0YSI6eyJzaG93TmF2aWdhdG9yIjpmYWxzZSwic2hvd09wZW5JbkNvZGVTYW5kYm94IjpmYWxzZSwic2hvd1JlZnJlc2hCdXR0b24iOnRydWUsInNob3dTYW5kcGFja0Vycm9yT3ZlcmxheSI6ZmFsc2V9fSwiQ29uc29sZSI6eyJ0eXBlIjoiY29uc29sZSIsImRhdGEiOnsic2hvd0hlYWRlciI6ZmFsc2UsInNob3dTeW50YXhFcnJvciI6ZmFsc2UsInNob3dTZXR1cFByb2dyZXNzIjpmYWxzZSwibWF4TWVzc2FnZUNvdW50IjoxMCwicmVzZXRPblByZXZpZXdSZXN0YXJ0IjpmYWxzZSwic3RhbmRhbG9uZSI6ZmFsc2V9fX0sImdlbmVyYWwiOnsidmlzaWJsZUZpbGVzIjpbIi9BcHAuanMiXSwidGhlbWUiOiJrZW1wb0RhcmsifSwibGF5b3V0cyI6eyJzbWFsbCI6IidFZGl0b3IgRWRpdG9yJ1xuJ1ByZXZpZXcgQ29uc29sZScifX19" height="750px" width="100%"></iframe>

## Effects can have cleanup functions

Another important part about effects is that they have optional *cleanup* functions. If you return a function in an effect, React will execute it before executing the next effect. In other words, it'll look something like this:

1. The effect runs on the initial render
    
2. A value in the dependency array changes
    
3. The cleanup function from the first effect runs
    
4. The *next* effect runs and returns a new cleanup function
    

In the example below, you'll notice that a `Clean up Count` log statement runs before the next `Count` log statement every time you click the Count button.

<iframe src="https://kempo.io/view/eyJpZCI6ImtsX3N4bzZra3B0dTdoNjd1em05YTNjZWZyYyIsIm5hbWUiOiJSZWFjdCB1c2VFZmZlY3QgRXhhbXBsZXMiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG59XG5cbmRpdiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xufVxuXG5idXR0b24ge1xuICAtLWI6IDNweDsgLyogYm9yZGVyIHRoaWNrbmVzcyAqL1xuICAtLXM6IDAuNDVlbTsgLyogc2l6ZSBvZiB0aGUgY29ybmVyICovXG4gIC0tY29sb3I6ICMzNzNiNDQ7XG5cbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiBjYWxjKDAuNWVtICsgdmFyKC0tcykpIGNhbGMoMC45ZW0gKyB2YXIoLS1zKSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvcik7XG4gIC0tX3A6IHZhcigtLXMpO1xuICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChcbiAgICAgIGZyb20gOTBkZWcgYXQgdmFyKC0tYikgdmFyKC0tYiksXG4gICAgICAjMDAwMCA5MGRlZyxcbiAgICAgIHZhcigtLWNvbG9yKSAwXG4gICAgKVxuICAgIHZhcigtLV9wKSB2YXIoLS1fcCkgLyBjYWxjKDEwMCUgLSB2YXIoLS1iKSAtIDIgKiB2YXIoLS1fcCkpXG4gICAgY2FsYygxMDAlIC0gdmFyKC0tYikgLSAyICogdmFyKC0tX3ApKTtcbiAgdHJhbnNpdGlvbjpcbiAgICAwLjNzIGxpbmVhcixcbiAgICBjb2xvciAwcyxcbiAgICBiYWNrZ3JvdW5kLWNvbG9yIDBzO1xuICBvdXRsaW5lOiB2YXIoLS1iKSBzb2xpZCAjMDAwMDtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuNmVtO1xuICBmb250LXNpemU6IDE2cHg7XG5cbiAgYm9yZGVyOiAwO1xuXG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICB0b3VjaC1hY3Rpb246IG1hbmlwdWxhdGlvbjtcbn1cblxuYnV0dG9uOmhvdmVyLFxuYnV0dG9uOmZvY3VzLXZpc2libGUge1xuICAtLV9wOiAwcHg7XG4gIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yKTtcbiAgb3V0bGluZS1vZmZzZXQ6IDAuMDVlbTtcbn1cblxuYnV0dG9uOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWNvbG9yKTtcbiAgY29sb3I6ICNmZmY7XG59XG4ifSwiL0FwcC5qcyI6eyJjb2RlIjoiaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zb2xlLmxvZyhgQ291bnQ6ICR7Y291bnR9YCk7XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGNvbnNvbGUubG9nKGBDbGVhbiB1cCBDb3VudDogJHtjb3VudH1gKTtcbiAgICB9O1xuICB9LCBbY291bnRdKTtcblxuICByZXR1cm4gPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5Db3VudCB7Y291bnR9PC9idXR0b24+O1xufVxuIn0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gXCJyZWFjdC1kb20vY2xpZW50XCI7XG5pbXBvcnQgXCIuL3N0eWxlcy5jc3NcIjtcblxuaW1wb3J0IEFwcCBmcm9tIFwiLi9BcHBcIjtcblxuY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJyb290XCIpKTtcbnJvb3QucmVuZGVyKDxBcHAgLz4pO1xuIn0sIi9wdWJsaWMvaW5kZXguaHRtbCI6eyJjb2RlIjoiPCFET0NUWVBFIGh0bWw+XG48aHRtbCBsYW5nPVwiZW5cIj5cbiAgPGhlYWQ+XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI+XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU+RG9jdW1lbnQ8L3RpdGxlPlxuICA8L2hlYWQ+XG4gIDxib2R5PlxuICAgIDxkaXYgaWQ9XCJyb290XCI+PC9kaXY+XG4gIDwvYm9keT5cbjwvaHRtbD4ifSwiL3BhY2thZ2UuanNvbiI6eyJjb2RlIjoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJyZWFjdFwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LWRvbVwiOiBcIl4xOC4wLjBcIixcbiAgICBcInJlYWN0LXNjcmlwdHNcIjogXCJeNS4wLjBcIlxuICB9LFxuICBcIm1haW5cIjogXCIvaW5kZXguanNcIixcbiAgXCJkZXZEZXBlbmRlbmNpZXNcIjoge31cbn0ifSwiL3V0aWxzLmpzIjp7ImNvZGUiOiJpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgY29uc3QgdXNlUmVyZW5kZXIgPSAoKSA9PiB7XG4gIGNvbnN0IFtzdGF0ZSwgc2V0U3RhdGVdID0gdXNlU3RhdGUoMCk7XG4gIHJldHVybiAoKSA9PiBzZXRTdGF0ZShzdGF0ZSArIDEpO1xufTtcbiJ9fSwidGVtcGxhdGUiOiJyZWFjdCJ9LCJkaXNwbGF5Ijp7ImNvbXBvbmVudHMiOnsiRWRpdG9yIjp7InR5cGUiOiJlZGl0b3IiLCJkYXRhIjp7InNob3dUYWJzIjp0cnVlLCJzaG93TGluZU51bWJlcnMiOnRydWUsInNob3dJbmxpbmVFcnJvcnMiOmZhbHNlLCJzaG93UnVuQnV0dG9uIjp0cnVlLCJ3cmFwQ29udGVudCI6dHJ1ZSwiY2xvc2FibGVUYWJzIjp0cnVlLCJyZWFkT25seSI6ZmFsc2UsInNob3dSZWFkT25seSI6ZmFsc2V9fSwiUHJldmlldyI6eyJ0eXBlIjoicHJldmlldyIsImRhdGEiOnsic2hvd05hdmlnYXRvciI6ZmFsc2UsInNob3dPcGVuSW5Db2RlU2FuZGJveCI6ZmFsc2UsInNob3dSZWZyZXNoQnV0dG9uIjp0cnVlLCJzaG93U2FuZHBhY2tFcnJvck92ZXJsYXkiOmZhbHNlfX0sIkNvbnNvbGUiOnsidHlwZSI6ImNvbnNvbGUiLCJkYXRhIjp7InNob3dIZWFkZXIiOmZhbHNlLCJzaG93U3ludGF4RXJyb3IiOmZhbHNlLCJzaG93U2V0dXBQcm9ncmVzcyI6ZmFsc2UsIm1heE1lc3NhZ2VDb3VudCI6MTAsInJlc2V0T25QcmV2aWV3UmVzdGFydCI6ZmFsc2UsInN0YW5kYWxvbmUiOmZhbHNlfX19LCJnZW5lcmFsIjp7InZpc2libGVGaWxlcyI6WyIvQXBwLmpzIl0sInRoZW1lIjoia2VtcG9EYXJrIn0sImxheW91dHMiOnsic21hbGwiOiInRWRpdG9yIEVkaXRvcidcbidQcmV2aWV3IENvbnNvbGUnIn19fQ==" height="750px" width="100%"></iframe>

And that's it!

A quick look at when React's `useEffect` hook runs.

Understanding when the `useEffect` hook runs will help you manage side effects predictably and efficiently, ensuring that your React components behave as expected!