Code review lab

React Anti-Patterns · Code Review

Code that works, passes tests and looks clean — and is still wrong. Every lesson hands you a component to review: find the problems before the analysis, follow the execution sequence that causes them, and decide which would block the PR. Several lessons contain code that looks suspicious and is fine — flagging good code has a cost too.

Intermediate → SeniorEverything runs in the IDE58 Step15 modules

This course reviews code. The model — render vs commit, state snapshots, effect lifecycle, identity, memoization — is taught in React Patterns, Good Practices & Internals. Every lesson here links the lesson there that it depends on.

DOJO PETYour little coding companion

DOJO / YOUR GUIDE

Let’s figure it out.

Ask me about this course or where to start.

Module 1 · Understanding React Before Fixing React3 lessons

What causes a render, why render must stay pure, and why the state you just set is not the state you are holding.

Module 2 · State Anti-Patterns6 lessons

Derived state, props copied into state, booleans that are really a state machine, state that is too high, state that is duplicated, and mutation.

Module 3 · useEffect Anti-Patterns7 lessons

Effects that calculate, effects that respond to clicks, dependency lies, infinite loops, unstable dependencies, missing cleanup, and races.

Module 4 · Ref Anti-Patterns3 lessons

Refs used as hidden state, refs used to dodge renders, and the DOM React thinks it owns — plus the cases where every one of those is correct.

Module 5 · Component Architecture5 lessons

The component that grew, the component that should not exist, prop drilling versus context abuse, the god provider, and hooks that only rename React.

Module 6 · Lists, Identity & Keys3 lessons

Index keys, random keys, and using a key on purpose to reset a subtree — the same mechanism producing a bug, a disaster and a technique.

Module 7 · Memoization & Performance5 lessons

useMemo everywhere, useCallback everywhere, memo everywhere, what the React Compiler changes, and work that is expensive for reasons memoization cannot touch.

Module 8 · Rendering & Event Performance3 lessons

State updates at pointer frequency, layout measured on every move, and fifty thousand DOM nodes — three costs that are not React's.

Module 9 · Async UI Anti-Patterns3 lessons

The loading boolean, server state modelled as client state, and the three outcomes nobody designs for.

Module 10 · Forms & Input3 lessons

Controlled by default without asking why, effects wired between fields, and the one-object form state that re-renders everything.

Module 11 · Advanced React Architecture4 lessons

Reducers that mutate, reducers that copy what did not change, external stores read without subscribing, and everything in global state.

Module 12 · React 19 & Modern React5 lessons

Old habits that stopped being necessary, Actions, optimistic UI that can lose, Suspense as it actually works, and the server boundary.

Module 13 · The Code Review Lab5 lessons

Five components with several independent problems each. Find them before the analysis — and in Lab 3, be right about the two that are fine.

Module 14 · Capstone1 lessons

One feature, twelve things worth an opinion, nine of which are problems. Write the review before you write any code.

Step 56CorrectnessDepends
Capstone — Review the Whole Feature
One file, one feature: a project board with a filter, a member list, a details panel and a save button. It is ...
Start Lesson

Module 15 · Reference2 lessons

The rules by category and the four decision trees, written to be re-opened during a review rather than memorised once.

React Patterns & Internals React 19 Course Back to Developer Hub

React Anti-Patterns · Code Review

Let’s figure it out.

What Actually Causes a Render?

Render Must Stay Pure

State Is a Snapshot

Storing Derived State

Duplicating Props Into State

Multiple Booleans for One State Machine

State That Should Be Local

State That Should Be Shared

Mutating State

Using Effects for Calculations

Using Effects to Respond to User Events

Effect Dependency Lies

Infinite Effect Loops

Objects and Functions as Effect Dependencies

Missing Effect Cleanup

Async Race Conditions

Using a Ref as Hidden State

Wrapping State in a Ref to Avoid Re-renders

Manipulating DOM That React Owns

The Giant Component

Over-Componentization

Prop Drilling vs Context Abuse

The Giant Context Provider

Premature Custom Hooks

Using the Array Index as a Key

Random Keys

Using a Key on Purpose to Reset State

useMemo Everywhere

useCallback Everywhere

React.memo Everywhere

React Compiler and Manual Memoization

Expensive Work in Render

State Updates in High-Frequency Pointer Events

Measuring Layout Repeatedly

Rendering Huge Lists Without Virtualization

Boolean Loading Everywhere

Fetching Server Data Like Local State

Ignoring Loading, Empty and Error UX

Making Everything Controlled Without a Reason

Synchronising Form State With Effects

The Giant Form State Object

Incorrect useReducer Usage

Reducers That Copy What Did Not Change

External Stores Without Proper Subscription

Putting Everything in Global State

Old Patterns Used Automatically

Misunderstanding Actions

Incorrect Optimistic UI

Suspense as a Loading Spinner Wrapper

Server vs Client Responsibility

Lab 1 — User Search

Lab 2 — Shopping Cart

Lab 3 — Dashboard, and the Code That Only Looks Wrong

Lab 4 — Drag-and-Drop Board

Lab 5 — Async Form

Capstone — Review the Whole Feature

Reference — The Rules, by Category

Reference — The Four Decision Trees

React Anti-Patterns · Code Review

Let’s figure it out.

What Actually Causes a Render?

Render Must Stay Pure

State Is a Snapshot

Storing Derived State

Duplicating Props Into State

Multiple Booleans for One State Machine

State That Should Be Local

State That Should Be Shared

Mutating State

Using Effects for Calculations

Using Effects to Respond to User Events

Effect Dependency Lies

Infinite Effect Loops

Objects and Functions as Effect Dependencies

Missing Effect Cleanup

Async Race Conditions

Using a Ref as Hidden State

Wrapping State in a Ref to Avoid Re-renders