About React Hooks Cheatsheet

State, memo, effects, context, custom hooks, newer APIs. Part of the DevTools Surf developer suite. Browse more tools in the Cheatsheets collection.

Use Cases

• React beginners learning when to use useState vs useReducer
• Senior devs reviewing newer hook APIs like useId and useSyncExternalStore
• Teams establishing hook conventions for code review standards
• Freelancers quickly referencing context and memo patterns mid-project

Tips

• Scan the custom hooks section for reusable abstraction ideas
• Check the useEffect cleanup patterns to avoid memory leaks
• Review the useMemo vs useCallback comparison to pick the right one

Fun Facts

• React Hooks were introduced at React Conf 2018 by Sophie Alpert and Dan Abramov, shipping in React 16.8 (February 2019).
• The Rules of Hooks exist because React tracks hook state by call order — calling hooks conditionally breaks this internal linked list.
• useReducer was inspired by Redux reducers, but Redux creator Dan Abramov actually joined the React team before hooks shipped.

FAQ

Does it include useTransition and useDeferredValue?

Yes — React 18 concurrent features are included. useTransition for non-urgent updates, useDeferredValue for stale-while-revalidate UIs.

What about the Rules of Hooks?

Prominent section. The two rules (only call at top level, only call from React functions) with examples of what breaks when you violate them.

Custom hooks?

Yes — how to extract and name them, dependencies, and when to split vs merge logic. The most-useful React feature.

Server Components?

Brief. RSCs aren't hooks — they're a different runtime. The cheatsheet links to Next.js App Router Basics for RSC patterns.