Key Concepts

Review core concepts you need to learn to master this subject

The Effect Hook

import React, { useState, useEffect } from 'react'; function TitleCount() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); return <button onClick={(prev) => setCount(prev + 1)}>+</button>; }

After importing useEffect() from the 'react' library, we call this Hook at the top level of a React function definition to perform a side effect. The callback function that we pass as the first argument of useEffect() is where we write whatever JavaScript code that we’d like React to call after each render.

Custom Hooks
Lesson 1 of 1
  1. 1
    At this point in your React journey, you should be familiar with the basics of React hooks. Remember, hooks allow us to perform essential logic with our function components. These actions include m…
  2. 2
    Before we get into creating custom hooks, let’s review what we know about the useEffect() hook. The useEffect() hook allows developers to perform an action after rendering. These actions are typi…
  3. 3
    Before we can build our own custom hooks, we should review the rules of hooks. These rules apply to React’s built-in hooks, like useState() and useEffect(), as well as any custom hooks that we …
  4. 4
    Custom hooks are JavaScript functions that use other hooks. They help share stateful logic that we may otherwise need to reuse throughout our application. For example, we may create custom hooks fo…
  5. 5
    Now it’s time to create our own custom hook! We’ll do so by creating a hook that uses the web browser’s Geolocation API. The Geol…
  6. 6
    Congrats on finishing the Custom Hooks lesson! In this lesson, we reviewed how the useState() and the useEffect() hooks work. We have also covered the rules that hooks are governed by. The rules of…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo