---
source_hash: "cb14eaad"
title: "Module 3: React Fundamentals - Hooks"
weight: 390
description: "Before Hooks (React 16.8), you needed classes to have state. Hooks allow you to use these features in simple functions."
category: "Training"
type: "training"
---

# 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](/training/module3-hooks-fondamentaux/usestate) | Manage local component state |
| 2 | [useEffect](/training/module3-hooks-fondamentaux/useeffect) | Side effects, API calls, subscriptions |
| 3 | [useRef](/training/module3-hooks-fondamentaux/useref) | DOM references and persistent values |
| 4 | [useContext](/training/module3-hooks-fondamentaux/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.

[Start: useState ->](/training/module3-hooks-fondamentaux/usestate)