---
source_hash: "eb1d5ee7"
title: "Module 4: Advanced React"
weight: 440
description: "Don't optimize by default. React is already fast. Use these tools only when you encounter a real performance problem."
category: "Training"
type: "training"
---

# Module 4: Advanced React

> This module covers advanced React concepts: performance optimization with useMemo and useCallback, creating custom hooks, and global state management with Redux.

## Prerequisites

- Module 3 completed (useState, useEffect, useRef, useContext)
- Understand JavaScript closures
- Understand references vs values

## Chapters

| # | Chapter | Content |  |
| --- | --- | --- | --- |
| 1 | [useCallback and useMemo](/training/module4-react-avance/usecallback-usememo) | Performance optimization and memoization |
| 2 | [Custom Hooks](/training/module4-react-avance/custom-hooks) | Create your own reusable hooks |
| 3 | [Redux and Redux Toolkit](/training/module4-react-avance/redux) | Global state management for complex applications |

## Module Objectives

By the end of this module, you will be able to:

- Optimize re-renders with useMemo and useCallback
- Identify when optimization is needed
- Create reusable custom hooks
- Understand the Redux pattern (actions, reducers, store)
- Use Redux Toolkit to simplify Redux

## When to Use These Concepts?

| Concept | Use Case |
| --- | --- |
| useMemo | Expensive calculations, data transformation |
| useCallback | Functions passed as props to memoized components |
| Custom Hooks | Reusable logic between components |
| Redux | Shared state between unrelated components |

## Optimization Warning

> **"Premature optimization is the root of all evil"** - Donald Knuth

Don't optimize by default. React is already fast. Use these tools only when you encounter a real performance problem.

[Start: useCallback and useMemo ->](/training/module4-react-avance/usecallback-usememo)