react-flashcards

Question 1

What is JSX?

Answer 1

A syntax extension for JavaScript that lets you write HTML-like markup inside JS files. It’s stricter than HTML — you must close all tags (e.g. <br></br>) and a component can only return one root element (wrap with <> … </> if needed).

Question 2

What’s the rule for React component names vs HTML tags?

Answer 2

React component names must start with a capital letter (e.g. <MyButton></MyButton>). HTML tags must be lowercase (e.g. <div>). This is how React distinguishes them.

Question 3

How do you embed JavaScript expressions in JSX?

Answer 3

Use curly braces {}. For content: {user.name}. For attributes: src={user.imageUrl}. For inline styles: style={{ color: ‘red’ }} (double curlies = an object inside JSX curlies).

Question 4

How do you specify a CSS class in JSX?

Answer 4

Use className instead of class: <img></img>. This is because ‘class’ is a reserved word in JavaScript.

Question 5

What does ‘export default’ do in a component file?

Answer 5

It specifies the main component in the file. Other components can be exported with named exports. A file can have one default export but many named exports.

Question 6

What are the two types of ‘model’ data in React?

Answer 6

Props and State. Props are like function arguments — passed from parent to child. State is a component’s memory — it lets a component track info and change it in response to interactions.

Question 7

What does ‘lifting state up’ mean?

Answer 7

Moving state from child components to their closest common parent, then passing it back down as props. This lets sibling components share and stay in sync with the same data.

Question 8

What is conditional rendering in React?

Answer 8

Using standard JS techniques (if/else, ternary ? :, logical &&) to conditionally include JSX. There’s no special React syntax for conditions.

Question 9

Why do list items need a ‘key’ prop?

Answer 9

Keys let React identify which items changed, were added, or removed. They should be unique among siblings (typically a database ID). Never use array index as key if the list can reorder.

Question 10

What is a React Fragment (<> </>)?

Answer 10

An empty wrapper that lets you return multiple JSX elements without adding extra DOM nodes. Equivalent to <React.Fragment>. Use <Fragment key={id}> when you need a key.</React.Fragment>

Question 11

Why must components be pure functions?

Answer 11

A pure component only calculates its output — given the same inputs (props, state, context), it always returns the same JSX. It should not mutate pre-existing variables or objects. This lets React optimize rendering, skip redundant work, and enable features like Suspense.

Question 12

What is React’s component tree?

Answer 12

A hierarchical structure where the root component renders child components, which render their own children. React uses this tree to determine render order and manage state. State is tied to a component’s position in this tree.

Question 13

What are Hooks in React?

Answer 13

Functions starting with ‘use’ that let you tap into React features (state, effects, context, etc.) from function components. Built-in hooks include useState, useEffect, useRef, useContext, useReducer, useMemo, useCallback, and more.

Question 14

What are the Rules of Hooks?

Answer 14

1) Only call hooks at the TOP LEVEL of your component or custom hook — never inside loops, conditions, or nested functions. 2) Only call hooks from React function components or custom hooks. This ensures React can correctly track hook state across renders.

Question 15

Why can’t you call hooks inside conditions or loops?

Answer 15

React relies on the ORDER hooks are called to match each hook with its state. If you conditionally skip a hook, every hook after it gets the wrong state. Extract a new component instead if you need conditional hook usage.

Question 16

What does useState return?

Answer 16

A pair: [currentValue, setterFunction]. Convention: const [thing, setThing] = useState(initialValue). The setter triggers a re-render with the new value.

Question 17

Does useState merge objects like class setState?

Answer 17

No. Unlike class components, the setter REPLACES the entire value. For objects, spread the previous state: setUser({ …user, name: ‘New’ }). Same for arrays — never mutate directly.

Question 18

What is a functional update with useState?

Answer 18

Passing a function to the setter: setCount(prev => prev + 1). Use this when the new state depends on the previous state, especially when batching multiple updates. React will pass the latest pending state as ‘prev’.

Question 19

What does ‘state as a snapshot’ mean?

Answer 19

When you call setState, the current render’s state variable doesn’t change. The new value is available on the NEXT render. Each render has its own snapshot of state, props, and event handlers.

Question 20

What happens if you call setState 3 times with the same value in one handler?

Answer 20

React batches state updates. If you do setCount(count + 1) three times, count is the same stale value each time — you only get +1, not +3. Use functional updates: setCount(c => c + 1) three times to get +3.

Question 21

How do you update objects in state immutably?

Answer 21

Create a new object with spread: setUser({ …user, name: ‘New’ }). For nested objects: setUser({ …user, address: { …user.address, city: ‘NYC’ } }). Never mutate state objects directly — React won’t detect the change.

Question 22

How do you update arrays in state immutably?

Answer 22

Use non-mutating methods: filter() to remove, map() to transform, […arr, newItem] to add, .slice() to copy a portion. Avoid push, pop, splice, reverse, sort directly on state arrays — copy first.

Question 23

What is useEffect for?

Answer 23

Synchronizing your component with an external system (APIs, browser DOM, timers, subscriptions, etc.). It runs AFTER the component renders and paints to the screen. It’s an ‘escape hatch’ from React’s declarative model.

Question 24

What do the different dependency arrays mean in useEffect?

Answer 24

useEffect(fn) — runs after EVERY render. useEffect(fn, []) — runs only after FIRST render (mount). useEffect(fn, [a, b]) — runs after renders where a or b changed.

Question 25

What is the cleanup function in useEffect?

Answer 25

The function you RETURN from your effect. React calls it before re-running the effect (with new deps) and on unmount. Use it to unsubscribe, clear timers, close connections, etc. Setup and cleanup should be 'symmetrical'.

Question 26

Why does useEffect run twice in development (Strict Mode)?

Answer 26

React intentionally mounts, unmounts, and re-mounts your component in dev to help you find missing cleanup functions. If your effect breaks on the second run, you need a cleanup function.

Question 27

How do you handle data fetching with useEffect correctly?

Answer 27

Use a cleanup flag: let ignore = false; fetch().then(result => { if (!ignore) setData(result) }); return () => { ignore = true }. This prevents race conditions when the component re-renders before the fetch completes.

Question 28

When should you NOT use useEffect?

Answer 28

Don't use it for: transforming data for rendering (compute during render instead), handling user events (use event handlers), resetting state when props change (use a key), or anything that can be calculated from existing props/state.

Question 29

What is useLayoutEffect and when should you use it?

Answer 29

Same API as useEffect, but fires synchronously BEFORE the browser repaints. Use it when you need to measure/manipulate the DOM before the user sees it (e.g., tooltips, measurements). Most effects should use useEffect.

Question 30

What does useRef return and how is it different from state?

Answer 30

Returns a mutable object { current: initialValue } that persists across renders. Unlike state: 1) Changing ref.current does NOT trigger a re-render. 2) It's mutable. 3) You can read/write it anytime (except during render for non-initialization).

Question 31

What are the two main use cases for useRef?

Answer 31

1) Holding a reference to a DOM node: then inputRef.current.focus(). 2) Storing mutable values that don't affect rendering (timer IDs, previous values, counters, etc.).

Question 32

When should you use a ref vs state?

Answer 32

Use state when the value affects what's rendered on screen (React needs to know about changes). Use a ref when you need to persist a value across renders but DON'T need React to re-render when it changes.

Question 33

What problem does Context solve?

Answer 33

Prop drilling — when you need to pass data through many layers of components that don't use it themselves. Context lets a parent provide data that any descendant can read directly, regardless of depth.

Question 34

How do you create and use Context (React 19)?

Answer 34

1) const ThemeCtx = createContext('default'). 2) Wrap with provider: . 3) Consume: const theme = useContext(ThemeCtx). Note: In React 19 you use directly instead of .

Question 35

What is the new use() API for Context in React 19?

Answer 35

use(SomeContext) reads context like useContext, but unlike hooks, it can be called conditionally (e.g., after an early return). It can also unwrap promises for Suspense. It's the direction React is heading.

Question 36

When should you use useReducer instead of useState?

Answer 36

When you have complex state logic with multiple sub-values, when the next state depends on the previous one, or when many event handlers modify state in a similar way. Reducers consolidate state update logic in one place.

Question 37

What is the signature of useReducer?

Answer 37

const [state, dispatch] = useReducer(reducerFn, initialState). reducerFn takes (currentState, action) and returns newState. You update state by calling dispatch({ type: 'action_name', ...payload }).

Question 38

What's the benefit of combining useReducer with Context?

Answer 38

It lets any component deep in the tree read state AND dispatch actions without prop drilling. Create two contexts (one for state, one for dispatch), provide both from the parent using the reducer. This is a powerful pattern for scaling state management.

Question 39

What does useMemo do?

Answer 39

Caches the RESULT of a calculation between re-renders. const value = useMemo(() => expensiveCalc(a, b), [a, b]). Only recomputes when dependencies change. Use it for genuinely expensive calculations, not everything.

Question 40

What does useCallback do?

Answer 40

Caches a FUNCTION definition between re-renders. const fn = useCallback(() => { doStuff(a) }, [a]). Equivalent to useMemo(() => fn, deps). Useful when passing callbacks to components wrapped in React.memo.

Question 41

useCallback(fn, deps) is equivalent to what?

Answer 41

useMemo(() => fn, deps). useCallback caches the function itself, useMemo caches any value. useCallback is syntactic sugar for the common case of memoizing functions.

Question 42

When should you NOT use useMemo/useCallback?

Answer 42

Don't prematurely optimize. Most re-renders are fast. Use them only when: 1) A calculation is noticeably slow. 2) Passing values to React.memo-wrapped children. 3) A value is used as a dependency of another hook. Profile first with React DevTools.

Question 43

What is React.memo and how does it relate to useCallback?

Answer 43

React.memo(Component) skips re-rendering a component when its props haven't changed (shallow comparison). But if you pass a new function reference each render, memo can't help. useCallback keeps the reference stable so memo works.

Question 44

What is useDeferredValue?

Answer 44

Defers updating part of the UI to keep the rest responsive. const deferredQuery = useDeferredValue(query). React 19 added an initialValue param. Use it for expensive rendering that shouldn't block user input.

Question 45

What is useTransition?

Answer 45

const [isPending, startTransition] = useTransition(). Marks a state update as non-urgent — React can interrupt it to handle more urgent updates (like typing). In React 19, startTransition supports async functions (Actions).

Question 46

What are Actions in React 19?

Answer 46

Functions that use async transitions (via startTransition, useActionState, or form actions). They automatically manage: pending states, optimistic updates, error handling, and form resets. Convention: functions using async transitions are called 'Actions'.

Question 47

What is useActionState?

Answer 47

const [state, submitAction, isPending] = useActionState(async (prevState, formData) => { ... }, initialState). Wraps an async function to track its result and pending state. Replaces manual useState for pending/error tracking.

Question 48

What is useOptimistic?

Answer 48

const [optimisticVal, setOptimistic] = useOptimistic(currentVal). Shows an optimistic UI while an async action is in progress. Automatically reverts to currentVal when the action completes or errors.

Question 49

What is the use() API?

Answer 49

A new React 19 API for reading resources in render. use(promise) suspends until the promise resolves (works with Suspense). use(context) reads context (can be called conditionally, unlike useContext). Only call in render, but CAN be called conditionally.

Question 50

How do form Actions work in React 19?

Answer 50

— pass a function to the action prop. React automatically calls it with FormData on submit, manages pending state, and resets the form for uncontrolled components.

Question 51

What is useFormStatus?

Answer 51

import { useFormStatus } from 'react-dom'. Returns { pending, data, method, action } for the nearest parent . Use it in submit buttons or form UI to show loading states without prop drilling.

Question 52

How do refs work differently in React 19?

Answer 52

ref is now a regular prop on function components — no more forwardRef needed! Also, ref callbacks can return a cleanup function (like effects). React 19 will deprecate forwardRef and the old null-calling pattern.

Question 53

What changed about Context providers in React 19?

Answer 53

You can render directly instead of . Cleaner syntax. will be deprecated in a future version.

Question 54

What is the React Compiler?

Answer 54

An official build-time tool (v1.0 released Oct 2025) that automatically adds memoization (useMemo/useCallback equivalent) to your components. It eliminates much of the need to manually optimize with these hooks.

Question 55

What are React Server Components (RSC)?

Answer 55

Components that render on the server (at build time or per-request), not in the browser. They can directly access databases, file systems, etc. Their code is never sent to the client, reducing bundle size.

Question 56

What is the 'use server' directive?

Answer 56

Marks a function as a Server Action — an async function that executes on the server but can be called from Client Components. It does NOT mark Server Components (there is no directive for those).

Question 57

What is the 'use client' directive?

Answer 57

Marks a file as a Client Component boundary. Everything in that file and its imports runs on the client. Without this directive, components are Server Components by default (in frameworks that support RSC).

Question 58

What is the event naming convention in React?

Answer 58

Props that represent events: onSomething (e.g., onClick, onSubmit, onHover). Handler functions: handleSomething (e.g., handleClick, handleSubmit). This convention makes data flow clear.

Question 59

Why is immutability important in React?

Answer 59

React detects changes by reference comparison. If you mutate an object/array, the reference stays the same and React won't know to re-render. Immutable updates (spread/copy) create new references that React can detect.

Question 60

What is a Custom Hook?

Answer 60

A function starting with 'use' that composes built-in hooks. It lets you extract and reuse stateful logic across components. Each component calling the hook gets its own independent copy of that state.

Question 61

What are the 5 steps of 'Thinking in React'?

Answer 61

1) Break UI into a component hierarchy. 2) Build a static version (no state). 3) Find the minimal state representation. 4) Identify where state should live. 5) Add inverse data flow (callbacks from children to parents).

Question 62

How should you choose your state structure?

Answer 62

Principles: 1) Group related state. 2) Avoid contradictory state. 3) Avoid redundant/derived state (compute it instead). 4) Avoid duplication. 5) Avoid deeply nested state (flatten it). Keep state minimal.

Question 63

What are Error Boundaries?

Answer 63

Class components (or libraries like react-error-boundary) that catch JavaScript errors in their child component tree, log them, and display a fallback UI. They don't catch errors in event handlers, async code, or SSR.

Question 64

What is Suspense?

Answer 64

}>. It shows a fallback UI while child components are loading (lazy-loaded components, data fetching with use(), etc.). It lets you declaratively specify loading states.

Question 65

What is the difference between controlled and uncontrolled components?

Answer 65

Controlled: React state drives the value (value={state} + onChange). You have full control. Uncontrolled: the DOM manages its own state (use defaultValue + refs to read). Controlled is preferred in most cases.

Question 66

How do you reset a component's state?

Answer 66

Change its 'key' prop. When the key changes, React destroys the old instance and creates a new one with fresh state. E.g., resets when selectedId changes.

Question 67

What does React's one-way data flow mean?

Answer 67

Data flows DOWN the component tree via props. Children communicate UP to parents via callback functions passed as props. This makes data flow predictable and easier to debug.

Question 68

What are resource preloading APIs in React 19?

Answer 68

prefetchDNS(), preconnect(), preload(), preinit() — from 'react-dom'. They tell the browser to load resources early (fonts, scripts, stylesheets), improving page performance. They deduplicate automatically.

Question 69

How does React 19 handle document metadata?

Answer 69

You can render