---

Source: z2h.fyi/cheatsheets/react-advanced — Zero to Hero cheatsheets for developers.

React Advanced

Quick Overview

React 18 introduced concurrent features. Advanced patterns let you build scalable, performant apps using hooks, context, and suspense.

Getting Started

• Ensure you are on React 18 (npm i react@latest react-dom@latest).
• Enable Concurrent Mode by rendering with <React.StrictMode>.

Core Concepts

Concept	Description
useReducer	State management alternative to useState.
useContext	Share state without prop drilling.
Suspense	Lazy‑load components and data.
Memoization	React.memo and useMemo to avoid re‑renders.
Error Boundaries	Catch UI errors.

Essential Commands / Syntax

• const [state, dispatch] = useReducer(reducer, initState);
• const value = useContext(MyContext);
• const LazyComp = React.lazy(() => import('./Comp'));
• export default React.memo(Component);
• function ErrorBoundary({children}) { … }

Common Patterns

• Data fetching with Suspense – wrap a promise in a resource and suspend.
• Global state – combine useContext with useReducer.
• Performance – memoize expensive calculations with useMemo.

Gotchas & Tips

• Don’t over‑memoize; it can add overhead.
• Remember that lazy components need a fallback UI.
• Error boundaries only catch errors in children, not in event handlers.

Next Steps

• Read the official React 18 docs on Concurrent Rendering.
• Take the “Advanced React” course on Frontend Masters.