⚛️

React & Next.js: Hooks, Patterns & Server Components

100 cards · 🇺🇸 English

React hooks and patterns plus Next.js routing and server components.

Study all 100 cards for free

Flashcards, quizzes, pixel-art games and a daily review that remembers for you.

Study this deck free

Try the first 10 cards

1 / 10

Question

UseState

Knew itLearning

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

Already have an account? Sign in

Cards

1UseState
A state hook that declares a state variable that you can update directly
2UseReducer
A state hook that declares a state variable with the update logic inside a reducer function
3Purpose of state in React
State lets a component 'remember' information like user input
4UseContext
A context hook that reads and subscribes to a context
5Context allow a component to
Receive information from distant parents without passing it as props
6UseRef
A ref hook that declares a ref. You can hold any value in it, but most often it's used to hold a DOM node
7Main difference between refs and state
Unlike with state, updating a ref does not re-render your component
8UseImperativeHandle
A ref hook that lets you customize the ref exposed by your component. This is rarely used
9UseEffect
An effect hook that connects a component to an external system
10Effects allow a component to
Connect to and synchronize with external systems, including network, browser DOM, animations, widgets, and other non-React code
11UseLayoutEffect
A variation of useEffect that fires before the browser repaints the screen. You can measure layout here
12UseInsertionEffect
A variation of useEffect that fires before React makes changes to the DOM. Libraries can insert dynamic CSS here
13UseEffectEvent
A hook that creates a non-reactive event to fire from any Effect hook
14UseMemo
A performance hook that lets you cache the result of an expensive calculation
15UseCallback
A performance hook that lets you cache a function definition before passing it down to an optimized component
16UseTransition
A performance hook that lets you mark a state transition as non-blocking and allow other updates to interrupt it
17UseDeferredValue
A performance hook that lets you defer updating a non-critical part of the UI and let other parts update first
18UseDebugValue
A hook that lets you customize the label React DevTools displays for your custom Hook
19UseId
A hook that lets a component associate a unique ID with itself. Typically used with accessibility APIs
20UseSyncExternalStore
A hook that lets a component subscribe to an external store
21UseActionState
A hook that allows you to manage state of actions
22Refs described as in React
An 'escape hatch' from the React paradigm, useful when you need to work with non-React systems
23Common way to optimize re-rendering performance
Skip unnecessary work by reusing cached calculations or skipping re-renders if data hasn't changed since previous render
24What type of updates should use useTransition?
Non-blocking updates that can be interrupted by other updates, separating them from synchronous blocking updates
25Typical use case for useId
Associating a unique ID with a component, typically used with accessibility APIs
26Can you define your own custom Hooks in React?
Yes, you can define your own custom Hooks as JavaScript functions
27Syntax pattern for useState
const [value, setValue] = useState(initialValue)
28Syntax pattern for useEffect
useEffect(() => { /* effect code */ return () => { /* cleanup */ } }, [dependencies])
29What should useEffect return?
A cleanup function that runs when the component unmounts or before the effect runs again
30Dependency array in useEffect
An array of values that determines when the effect should re-run. The effect runs when any dependency changes