React: Lifecycle events

So far we’ve seen how to manage the state with the useState hook.

There’s another hook I want to introduce: useEffect.

The useEffect hook allows components to have access to the lifecycle events of a component and do something when the component is first rendered as it’s mounted in the DOM, and when it’s re-rendered.

When you call the useEffect hook, you pass it a function. The function will be run by React when the component is first rendered, and on every subsequent re-render/update.

React first updates the DOM, then calls any function passed to useEffect().

Here is an example:

import { useEffect, useState } from 'react'

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`You clicked ${count} times`)

  return (
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>

The useEffect() function is run on every subsequent re-render/update of the component.

We can tell React to skip a re-render, for performance purposes, by adding a second parameter, an array that contains a list of state variables to watch for.

React will only re-run the function if one of the items in this array changes:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
}, [name, count])

Using this syntax you can tell React to only execute the function when the component is first loaded by passing an empty array:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

NOTE: as of the latest version of React 18, in development mode (not in production mode) the function is called 2 times when the component is first rendered. So, don’t worry if you see the function being called 2 times instead of 1. But if this is a problem for your app and you want to “fix” this, I wrote a tutorial on how to fix this.

Lessons in this unit:

0: Introduction
1: DEMO Setting up a React project with Vite
2: React Components
3: Introduction to JSX
4: Using JSX to compose UI
5: The difference between JSX and HTML
6: Embedding JavaScript in JSX
7: Handling user events
8: Managing state
9: Component props
10: Data flow
11: ▶︎ Lifecycle events
12: Managing forms in React
13: Install the React Developer Tools
14: DEMO Installing Tailwind CSS in a React app
15: DEMO Build a counter in React
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!