React Hooks in React

React Hooks covers the functions that give components state, side effects and reusable logic.

What each lesson covers:

• Understanding Hooks: What hooks are, their benefits and rules, when to use them, the five groups of built-in hooks, a tour of useState, useEffect, useRef, useContext, useReducer, useMemo and useCallback, and how to pick the right one.
• Custom Hooks: Why custom hooks exist, reusing logic across components, creating and naming hooks, using built-in hooks inside them, and useToggle and useForm examples.
• Component Lifecycle: Mounting, updating and unmounting, how rendering and effects fit together, useEffect and its dependency array, cleanup functions, and how to avoid infinite effect loops.

Hooks appear in almost every React codebase, so this chapter is worth taking slowly.

Every page runs real React in your browser. Edit the code and see the result next to it. Each lesson ends with exercises that check what your app shows, not how your code is written.

Lessons in this section

1. Understanding Hooks

   What hooks are, their benefits and rules, when to use them, the five groups of built-in hooks, a tour of useState, useEffect, useRef, useContext, useReducer, useMemo and useCallback, and how to choose the right one.

2. Custom Hooks

   What custom hooks are and why to use them, reusing logic across components, creating and naming hooks, using built-in hooks inside them, and useToggle and useForm examples.

3. Component Lifecycle

   Mounting, updating and unmounting, how rendering and effects fit together, managing the lifecycle with useEffect, effect dependencies and dependency arrays, cleanup functions, and avoiding infinite effect loops.