Level 4: The Side Effects
React components do more than show things. Learn to read what they do behind the scenes.
Welcome to Level 4
In Level 3, you learned to read hooks -- useState for memory, useEffect for timing, useContext for shared data. Now you are ready to see what React components actually do with those tools in the real world.
Real React apps are not static displays. They talk to servers, handle forms, navigate between pages, and manage the messy reality of things that take time. This level teaches you to read the patterns that connect React components to the outside world.
What you will learn
| Module | Topic | Core Idea |
|---|---|---|
| 4.1 | Fetching Data | The most common side effect: loading data from a server |
| 4.2 | Forms and User Input | How React handles what users type and submit |
| 4.3 | Navigation and Routing | How single-page apps show different pages without reloading |
| 4.4 | Common Async Patterns | Loading states, error handling, and patterns that handle things that take time |
| 4.5 | Checkpoint | Test your ability to trace what happens beyond the screen |
The core idea
Every pattern in this level builds on what you learned in Level 3. Data fetching is useState + useEffect. Forms are useState + event handlers. Routing introduces new hooks but follows the same read-the-name-and-return-value strategy. You already have the foundation -- this level shows you the most common things built on top of it.
Level 4 connects React components to the real world -- servers, user input, URLs, and time. Every pattern here combines the hooks you learned in Level 3 with practical, everyday use cases.
Think about the last time you used a web app. You probably loaded a page (data fetch), filled out a form (user input), clicked a link to another page (routing), and waited for something to load (async pattern). This level covers all four.
Ready?
Start with Module 4.1: Fetching Data to learn the pattern behind every loading spinner you have ever seen.