MazoCardsGit Commands Cheat Sheet
50 practical Git command flashcards for commits, branches, inspection, recovery, collaboration, and debugging history.
Programming flashcards
React Hooks Essentials
40 React 19.2 hooks flashcards covering effects, state, refs, transitions, actions, external stores, and pitfalls.
#react#hooks#react-19#frontend#pitfalls
About this deck
This 40-card React hooks deck is aligned with React 19.2. It covers core state, context, ref, effect, and performance hooks plus actions, optimistic state, external stores, Effect Events, and common design mistakes.
The deck emphasizes when not to use an Effect or memo hook, because choosing the wrong abstraction is a more common problem than forgetting a hook name.
40cards
React beginner to intermediatelevel
React developers, frontend learners, and interview candidates using modern Reactaudience
What you will learn
- State, reducer, context, ref, effect, and transition hooks.
- React 19 action and optimistic UI hooks.
- External-store subscriptions, Effect Events, form status, and Suspense-related APIs.
- Pitfalls involving dependencies, stale closures, duplicated state, and unnecessary memoization.
How to study this deck
- For each hook, name the problem it solves before recalling its API.
- Compare hooks that look similar, such as state versus ref and transition versus deferred value.
- Turn pitfall cards into tiny component examples and let the hooks linter check them.
Recommended study setup
- Start with about 12 cards per session; the full deck is roughly 4 first-pass packs.
- Type or run one minimal example for each missed card; syntax recall without execution is not enough.
- Use quiz mode after one recall pass; study notes appear only after you answer.
Scope
This deck targets stable React 19.2 APIs and design guidance. Canary-only APIs, framework-specific data loading, and React internals are out of scope.
Review notes
Hook list and guidance checked against official React 19.2 documentation on 2026-07-10.
All 40 cards in this deck
| Front | Back | Study note |
|---|---|---|
| useState | Stores local component state and provides a setter. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useEffect | Runs side effects after render, such as subscriptions or data loading. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useLayoutEffect | Runs synchronously after DOM mutations, before the browser paints. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useContext | Reads a value from a React context without prop drilling. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useMemo | Memoizes an expensive computed value between renders. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useCallback | Memoizes a function reference between renders. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useRef | Stores a mutable value that does not trigger re-render when changed. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useReducer | Manages state with a reducer function for more structured updates. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useId | Generates a stable unique id for accessibility attributes. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useTransition | Marks state updates as non-urgent to keep the UI responsive. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| Custom hook | A reusable function that calls hooks and encapsulates component logic. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| Effect cleanup | A function returned from useEffect to remove listeners, timers, or subscriptions. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| Dependency array | The list of values that decide when an effect or memo recalculates. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| Rules of hooks | Call hooks at the top level of React functions, not inside loops or conditions. | Design cue: name the external system, state transition, or render optimization that justifies this hook before using it. |
| useDeferredValue | Defers updating a non-critical value so urgent UI can render first. | The deferred value lags behind; it does not impose a fixed time delay. |
| useSyncExternalStore | Subscribes safely to data stored outside React. | Use for external stores or browser APIs that support subscriptions. |
| useImperativeHandle | Customizes the value exposed through a ref. | Rarely needed; prefer declarative props when possible. |
| useDebugValue | Adds a label for a custom hook in React DevTools. | Most useful inside reusable library hooks. |
| useInsertionEffect | Runs before React makes DOM changes so libraries can insert styles. | Intended mainly for CSS-in-JS library authors, not normal app effects. |
| useActionState | Manages state produced by an Action and exposes whether it is pending. | Useful for forms and async actions in React 19. |
| useOptimistic | Shows an optimistic state while an Action is in progress. | Reconcile or roll back when the real result arrives. |
| useEffectEvent | Creates non-reactive logic that can be called from an Effect. | Do not use it to hide real dependencies; it is for logic that should read latest values without resubscribing. |
| use API | Reads a Promise or context resource during render. | Unlike Hooks, use can appear in loops or conditions, but it still must run inside a component or Hook. |
| startTransition | Marks state updates as non-urgent outside a component hook. | Use useTransition when the component also needs an isPending value. |
| useFormStatus | Reads the status of a parent form submission from react-dom. | It must be rendered inside the form whose status it reads. |
| When is an Effect unnecessary? | When a value can be derived during render or logic belongs in an event handler. | Effects are for synchronization with external systems. |
| Derived state | Compute it from props and state during render instead of storing a duplicate. | Duplicated state can drift out of sync. |
| Functional state update | Passes a function such as setCount(c => c + 1). | Use when the next state depends on the previous state. |
| Immutable state update | Creates a new object or array instead of mutating existing state. | React compares references to decide what changed. |
| Ref versus state | Use a ref for values not used to render; use state for visible data. | Changing ref.current does not trigger a re-render. |
| Stale closure | A callback reads values captured by an older render. | Correct dependencies or functional updates usually solve it. |
| exhaustive-deps | Lint rule that checks reactive values used by Effects and memo hooks. | Restructure code instead of suppressing the rule by default. |
| Effect dependency comparison | React compares dependencies with Object.is. | New object or function references can make an Effect run again. |
| useMemo caveat | It is a performance optimization, not a semantic guarantee. | Code should still be correct if React discards the cached value. |
| useCallback caveat | It caches a function reference, not the function result. | It helps only when reference stability has a real consumer. |
| Reducer dispatch | Describes an event to a reducer instead of directly calculating state in the component. | Reducers help when transitions are complex or related. |
| Custom hook naming | A custom hook name starts with use. | This convention lets lint rules enforce Hook usage. |
| Hooks in Server Components | State and Effect hooks require a Client Component. | Server Components can use server-compatible APIs but do not run browser effects. |
| Suspense and use | Reading a pending Promise with use suspends to the nearest Suspense boundary. | Provide a useful fallback and error handling around async resources. |
| StrictMode Effect check | Development Strict Mode runs an extra setup-cleanup cycle. | This reveals missing cleanup; production does not keep the extra cycle. |
Frequently asked questions
Is this React hooks deck current for React 19?
Yes. It includes stable React 19.2 hooks such as useActionState, useOptimistic, and useEffectEvent.
Does it include useEffect pitfalls?
Yes. It covers cleanup, dependencies, stale closures, Effect Events, and cases where no Effect is needed.
Are Canary APIs included?
No. The scope is stable React 19.2 and closely related stable react-dom hooks.
Is the React Hooks Essentials flashcard deck free?
Yes. You can study it free in your browser on MazoCards. Create a free account to save progress, track streaks, and sync across devices.
More Programming flashcards
JavaScript Array Methods
50 JavaScript array method flashcards covering transformation, search, mutation, copying methods, iteration, and common pitfalls.
Python Basics: Syntax & Data Types
50 Python basics flashcards covering core syntax, collections, functions, files, exceptions, classes, typing, and everyday tools.
SQL Basics: Queries & Joins
50 SQL flashcards covering queries, filtering, joins, aggregation, subqueries, CTEs, windows, transactions, constraints, and query plans.
CSS Flexbox and Grid
CSS layout flashcards covering Flexbox, Grid, alignment, tracks, gaps, and responsive patterns.
Common TCP and UDP Ports
Common network port flashcards for CompTIA-style networking, sysadmin, and developer review.
Start studying React Hooks Essentials
Study these 40 cards free, then create an account to save your progress and build a streak.