Performance & Memoization
memo, useMemo, useCallback, context splitting and re-render prevention.
- Medium~20 min
Context & Unnecessary Re-renders
<Child /> is wrapped in React.memo, yet it re-renders every time <Parent /> updates. Why? Fix it.
- Context
- Re-renders
Start Challenge - Medium~20 min
React.memo & Callback Props
MemoizedButton still re-renders when Parent updates. Fix it.
- useCallback
- React.memo
Start Challenge - Medium~20 min
Reducing Re-renders via Composition
SlowComponent re-renders when color changes. Optimize it without React.memo.
- Re-renders
- Composition
Start Challenge - Easy~10 min
The key Prop: Index as Key
Why is using index as a key bad for a list where items can be reordered or deleted?
- key prop
Start Challenge - Easy~10 min
Automatic Batching (React 18)
In React 18, if you have two state updates inside a setTimeout, how many times does the component render?
- Batching
Start Challenge - Medium~20 min
The Useless Memo
The HeavyComponent is wrapped in React.memo, but it re-renders every time the user types in the input…
- React.memo
Start Challenge - Hard~35 min
Context Splitting for Performance
A single Context provides both user data and theme, causing unnecessary re-renders. When theme changes…
- Context
Start Challenge - Medium~20 min
useMemo vs useCallback - When to Use Which
The component re-renders unnecessarily. Determine whether to use useMemo or useCallback and fix the…
- useMemo
- useCallback
Start Challenge - Hard~35 min
Context Splitting for Performance
The app re-renders everything when any context value changes. The user object changes rarely, but the theme…
- Context
Start Challenge - Hard~35 min
Children Props Optimization
Even with React.memo, the child component re-renders because the children prop changes reference every render.
- React.memo
- Composition
Start Challenge - Medium~20 min
One-Pass Rollup: reduce + Object.entries
A sales dashboard: the raw order feed plus a per-category revenue table. The baseline works the wrong way…
- React
Start Challenge - Medium~20 min
Sales Dashboard: GroupBy with Nested Reduce
A regional sales matrix (region rows × month columns) whose numbers are right but whose derivation is wrong…
- React
Start Challenge