React Flashcards

Question

True or False: React 19 has improved support for server-side rendering.

Answer 1

They allow components to be rendered on the server and sent to the client.

Answer 2

They automatically catch errors in component trees.

Answer 3

React Profiler API enhancements

Answer 4

It generates unique IDs for accessibility and rendering.

Answer 5

To subscribe to external data sources.

Answer 6

It coordinates multiple suspense components.

Answer 7

React 19 introduces the ability to use a context directly as a provider (e.g., ) instead of requiring . **Provider Syntax** This change eliminates boilerplate code for context providers, making state sharing cleaner and more intuitive across components. A codemod will be available to update existing usage, with plans to deprecate the old syntax in future versions. **Related Enhancements** The use hook now allows reading context values conditionally or in loops, unlike useContext, which must be called unconditionally at the top level. These updates reduce unnecessary re-renders and improve performance for granular state management.

Answer 8

It allows for DOM mutations before the browser paints.

Answer 9

To perform side effects synchronously after all DOM mutations.

Answer 10

To enable code-splitting by loading components lazily.

Answer 11

It allows grouping multiple elements without adding extra nodes.

Answer 12

It customizes the instance value that is exposed to parent components.

Answer 13

React state (with hooks) re-renders the entire component on change, while signals update only the parts of the UI that use the signal's value, avoiding full component re-renders.

Answer 14

Signals automatically track which components use their value and update only those, while React requires explicit dependency arrays in hooks like useEffect.

Answer 15

A signal is an object with a .value property that notifies subscribed components to update when its value changes, enabling granular UI updates.

Answer 16

React re-runs the entire component function and its child components when state changes, potentially causing unnecessary re-renders.

Answer 17

You can use signals in React by installing the @preact/signals-react package and importing the signal object where needed.

Answer 18

Signals can introduce debugging complexity and may not scale as well as advanced state management tools like Redux in very large applications.

Answer 19

Yes, signals can be used inside or outside of components, including class components, unlike hooks which are limited to function components.

Answer 20

Signals can make debugging more complex because state is managed through a centralized store, making it harder to trace data flow.

Answer 21

Signals are best suited for simple to medium-sized applications where performance and simplicity are priorities.

Answer 22

Signals offer a simpler, more lightweight alternative for small to medium apps, while Redux and Context are better for complex, large-scale state management.

Answer 23

Automatic dependency tracking means signals detect which components use their value and update them when the value changes, without manual setup.

Answer 24

Signals can complicate the component execution model and require developers to manage which values are signals versus plain values, potentially increasing code complexity.

Answer 25

Concurrent Mode in React 19 is a set of features that allows React to work on multiple rendering tasks simultaneously, making rendering interruptible and prioritizable. This means React can pause, resume, or even abandon rendering work to handle more urgent updates.

Answer 26

useTransition, useOptimistic, (useActionState, useFormStatus uses concurrent features)

Answer 27

Lets you mark updates as non-urgent, allowing React to prioritize urgent interactions and keep the UI responsive during heavy computations or data fetching. It returns a pending state and a function to start a transition.

Answer 28

Enables optimistic UI updates by allowing the UI to reflect the expected result of an async operation immediately, while the actual update happens in the background. Once the async action completes, the UI updates accordingly.

Answer 29

Simplifies managing form state, async updates, and errors by consolidating them into a single API, reducing the need for multiple useState calls when handling complex form logic.

Answer 30

Provides real-time status of a parent

Answer 31

useTransition is used to mark updates as non-urgent, allowing React to prioritize urgent interactions (like typing or clicking) over background tasks (like filtering a large list), keeping the UI responsive during heavy computations or async operations.

Answer 32

useOptimistic is ideal when you want to show immediate UI feedback for an async action (such as adding an item to a list) before the server confirms the change, enabling optimistic UI updates.

Answer 33

useFormStatus provides components (like buttons) with real-time status of their parent form, such as whether a submission is pending, which is useful for disabling buttons or showing loading indicators during concurrent form submissions.

Answer 34

useDeferredValue is a React hook introduced in React 18 that allows you to defer updating a part of the UI, making your application feel more responsive during heavy or expensive renders.

Answer 35

When you wrap a value with useDeferredValue, React will prioritize urgent updates (like user input) and delay updating the parts of your UI that depend on the deferred value. This means the UI can display "stale" or previous data for a short period, while React processes the expensive update in the background. Once React has spare time, it updates the UI with the latest value.

Answer 36

Filtering or rendering very large lists Live previews (e.g., markdown editors) Complex data visualizations

Answer 37

An **in-memory representation** of the UI; React diffs the old vs. new virtual DOM trees and applies only the minimal real DOM changes (reconciliation).

Answer 38

The process React uses to **diff two virtual DOM trees** and compute the minimal set of real DOM mutations needed to update the UI.

Answer 39

React's internal reconciliation engine (since v16); enables **incremental rendering** by splitting work into pauseable/resumable units — foundation for concurrent features.

Answer 40

`useEffect` runs **after paint** (asynchronous). `useLayoutEffect` runs **synchronously after DOM mutations but before paint** — use for measuring DOM elements.

Answer 41

- `[]` — runs only on mount/unmount - `[a, b]` — re-runs when a or b changes - Omitted — runs after **every render**

Answer 42

Memoizes a functional component; **skips re-render** if props haven't changed (shallow comparison of each prop).

Answer 43

Memoizes a **computed value** — only recomputes when dependencies change. Use for expensive calculations.

Answer 44

Memoizes a **function reference** — returns the same function instance unless dependencies change. Prevents child re-renders when passing callbacks as props.

Answer 45

`useMemo(() => value, deps)` caches a **value**. `useCallback(fn, deps)` caches a **function** (equivalent to `useMemo(() => fn, deps)`).

Answer 46

`useReducer(reducer, initialState)` — prefer when state has **complex transitions**, multiple sub-values, or when next state depends on previous state + action.

Answer 47

Provides values deep in the component tree without prop-drilling. Gotcha: **all consumers re-render** whenever the context value changes, even if only part of the value changed.

Answer 48

A function starting with `use` that **composes built-in hooks** — extracts reusable stateful logic from components.

Answer 49

Components that render **on the server**, don't ship JavaScript to the client, and can directly access server resources (DB, filesystem). Available in Next.js App Router.

Answer 50

Server components: no JS bundle, no hooks, async by default, server-only access. Client components: `'use client'` directive, can use hooks and browser APIs.

Answer 51

Lets components "wait" for async data before rendering; shows a **fallback** UI (e.g., spinner) until the data or lazy-loaded component is ready.

Answer 52

A **stable unique identifier** for list items; tells React which element maps to which between renders — enables efficient reconciliation instead of re-mounting.

Answer 53

If list order changes (insert, delete, sort), React may reuse wrong component instances → **stale state and visual bugs**.

Answer 54

- Mount: `useEffect(() => { ... }, [])` - Update: `useEffect(() => { ... }, [dep])` - Unmount: return cleanup function from `useEffect`

Answer 55

State change (`setState`/`useState`), context value change, parent re-render (unless `React.memo` blocks it), or `forceUpdate`.

Answer 56

Passing props through many layers of components. Solutions: **React Context**, **state management library** (Zustand, Redux), or **component composition**.

Answer 57

1. Accessing a **DOM element** directly. 2. Storing a **mutable value** that doesn't trigger re-render when changed.

Answer 58

**Controlled**: form value managed by React state (`value` + `onChange`). **Uncontrolled**: DOM manages its own state; accessed via `ref`.

React Flashcards

(86 cards)