· 3 min read

React Hooks and Next.js Study Guide: 100 Flashcards from useState to Server Components

Study React hooks and Next.js with 100 flashcards: hook families, useEffect dependency rules, SSR, SSG, ISR, plus the outdated cards you should fix first.

Glowing atom orbit with a hook shape above a server rack, surrounded by floating flashcards

Studying. But it's also a video game. 🎮

Flashcards, quizzes and games that make you actually remember.

Start playing — it's free

Posted by

React hooks and Next.js are two different study problems glued into one deck. UZ3937 – React & Next.js: Hooks, Patterns & Server Components has 100 cards: cards 1-72 are a tight tour of React's built-in hooks and their rules, cards 73-100 are Next.js features and history. Despite the title, Server Components get exactly one card (95). Here is how to get the most out of it.

Study this deck: React & Next.js: Hooks, Patterns & Server Components

1 / 10
Question

UseState

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Cards worth drilling first

FrontBack
useReducerA state hook that declares a state variable with the update logic inside a reducer function
Main difference between refs and stateUnlike with state, updating a ref does not re-render your component
useLayoutEffectA variation of useEffect that fires before the browser repaints the screen
useMemo vs useCallbackuseMemo caches the result of a function call, useCallback caches the function itself
What happens if you omit the dependency array in useEffect?The effect runs after every render
Can you call hooks conditionally?No, hooks must be called in the same order every render
Pattern for using useTransitionconst [isPending, startTransition] = useTransition()
Incremental Static Regeneration (ISR)Updating static pages after build time without rebuilding the entire site
React Server ComponentsComponents that run on the server, reducing client-side JavaScript

What the deck covers

Hooks: useState, useReducer, useContext, createContext, useRef and .current, useImperativeHandle, useEffect (cleanup function, dependency array, empty array), useLayoutEffect, useInsertionEffect, useEffectEvent, useMemo, useCallback, useTransition and isPending, useDeferredValue, useDebugValue, useId, useSyncExternalStore, useActionState, custom hooks and the use prefix, rules of hooks, batching, immutable state updates, refs and Effects as escape hatches. Next.js: SSR, SSG, ISR, the .next folder, hot reloading and HMR, automatic code splitting, prefetching, Turbopack, Webpack, SWC, middleware, Edge Functions, streaming, selective server rendering, SEO benefits.

Study it in three passes

Pass 1 – group hooks by family, not by deck order. React's own docs sort them as state (useState, useReducer), context, refs, effects (useEffect, useLayoutEffect, useInsertionEffect), performance (useMemo, useCallback, useTransition, useDeferredValue) and other. Tag each card with its family; most wrong answers are a confusion between siblings, so drill siblings back to back: useLayoutEffect fires before paint, useInsertionEffect fires before DOM mutations.

Pass 2 – type the patterns. Cards 27-38 and 56-58 are code. Don't just flip them: type useEffect(() => { ... return () => {...} }, [deps]) from memory until the three dependency cases (none, empty, values) are automatic.

Pass 3 – the Next.js block, with a date filter. Cards 73-100 come from an encyclopedia-style source and mix concepts with trivia (which companies use Next.js, Google's 43 pull requests in 2019, Next.js Live). Keep the concept cards, demote the trivia.

Fix these cards before you memorize them

  • Front casing: fronts read UseState, UseRef… Hooks are camelCase (useState); a capital U is a component name and breaks the use rule taught in card 51.
  • Card 40 promises three arguments to a reducer, then lists two (state and action). Rewrite it as "two arguments".
  • Card 59: in React 19, function components receive ref as a regular prop; forwardRef is no longer needed for useImperativeHandle.
  • Card 82: Turbopack was announced with Next.js 13; it became stable for next dev in 15 and the default bundler in Next.js 16.
  • Card 85: "page-based routing" describes the Pages Router. Add a card for the App Router (app/ directory, layouts), which is where Server Components live.
  • Card 94: npm is not required — pnpm, Yarn and Bun all work with create-next-app.

Then write the Server Components cards the title promises: "use client", "use server", Server Actions, use(), useOptimistic and useFormStatus.

Related reading

Hooks are plain JavaScript closures and arrays underneath. If destructuring, arrow functions or spread still slow you down, start with JavaScript ES6+ Features and JavaScript Array, String and Object Methods — the mutating vs copying split is exactly why card 65 says never to mutate state.

Find the deck with code UZ3937 in the Flip It library.

Ready to learn faster? 🚀

Join FLIP IT for free and turn studying into a game.

Create my free account