Key Concepts

Review core concepts you need to learn to master this subject

The Effect Hook

Rules for Using Hooks

Effect hooks

Effect Dependency Array

Custom Hooks

Use of Custom Hooks

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
    Introduction to Advanced Hooks
    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…
    Start
  2. 2
    Reviewing Effect Hooks
    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…
    Start
  3. 3
    Reviewing the Rules of Hooks
    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 …
    Start
  4. 4
    Custom Hooks
    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…
    Start
  5. 5
    Create Your Own Custom Hook
    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…
    Start
  6. 6
    Review
    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…
    Start

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