Module 3: React Fundamentals - Hooks
Hooks are functions that allow you to use state and other React features in functional components. This module covers the essential hooks.
What is a Hook?
Before Hooks (React 16.8), you needed classes to have state. Hooks allow you to use these features in simple functions.
Hooks Rules:
- Always call hooks at the top level of the component
- Never inside conditions, loops, or nested functions
- Only in React components or custom hooks
Chapters
| # | Chapter | Content | |
|---|---|---|---|
| 1 | useState | Manage local component state | |
| 2 | useEffect | Side effects, API calls, subscriptions | |
| 3 | useRef | DOM references and persistent values | |
| 4 | useContext | Share data without prop drilling |
Module Objectives
By the end of this module, you will be able to:
- Manage local state with
useState - Execute side effects with
useEffect - Understand the dependency array
- Access the DOM with
useRef - Share data with Context
Why Hooks Are Important
Without Hooks, you cannot:
- Store changing data (forms, counters, lists)
- Call an API when the component mounts
- React to props or state changes
- Access a DOM element (focus, scroll)
Hooks are the heart of modern React.
Estimated Time
Approximately 3-4 hours to go through this module and complete the exercises.