# useEffect React hook, how to use
> Learn how to use the useEffect React hook to run side effects after render, control runs with a dependency array, and clean up with a returned function.
Author: Flavio Copes | Published: 2019-07-19 | Updated: 2022-05-05 | Canonical: https://flaviocopes.com/react-hook-useeffect/
> Check out my [React hooks introduction](https://flaviocopes.com/react-hooks/) first, if you're new to them.
One [React](https://flaviocopes.com/react/) hook I use a lot is `useEffect`.
```js
import React, { useEffect } from 'react'
```
The `useEffect` function runs when the component is first rendered, and on every subsequent re-render/update.
React first updates the DOM, then calls the function passed to `useEffect()`.
Example:
```js
const { useEffect, useState } = React
const CounterWithNameAndSideEffect = () => {
const [count, setCount] = useState(0)
const [name, setName] = useState('Flavio')
useEffect(() => {
console.log(`Hi ${name} you clicked ${count} times`)
})
return (
Hi {name} you clicked {count} times
)
}
```
> TIP: if you're an old-time React dev and you're used to `componentDidMount`, `componentWillUnmount` and `componentDidUpdate` events, this replaces those.
You can optionally **return a function** from the function you pass to `useEffect()`:
```js
useEffect(() => {
console.log(`Hi ${name} you clicked ${count} times`)
return () => {
console.log(`Unmounted`)
}
})
```
The code included in that function you return will execute when the component is unmounted.
You can use this for any "cleanup" you need to do.
> For old timers, this is like `componentWillUnmount`
`useEffect()` can be called multiple times, which is nice to separate unrelated logic.
Since the `useEffect()` functions are run on every subsequent re-render/update, we can tell React to skip executing the function, for performance purposes, by adding a second parameter which is an array that contains a list of state variables to watch for.
React will only re-run the side effect if one of the items in this array changes.
```js
useEffect(
() => {
console.log(`Hi ${name} you clicked ${count} times`)
},
[name, count]
)
```
Similarly you can tell React to only execute the side effect once (at mount time), by passing an empty array:
```js
useEffect(() => {
console.log(`Component mounted`)
}, [])
```
This ☝️ is something I use all the time.
If you're ever unsure whether `useEffect` is the hook you need, try my free [React hook chooser](https://flaviocopes.com/tools/react-hook-chooser/).
Example on Codepen: