React

Question 1

Where are Server Components and Client Components rendered?

Answer 1

Server Components render exclusively on the server and never re-render on the client. Client Components render on both the server (during SSR/SSG) and client (during hydration).

Question 2

What directive marks a component as a Client Component?

Answer 2

The ‘use client’ directive at the top of a file signals a Client Component, enabling client-side interactivity and hooks like useState.

Question 3

Why can’t Server Components use React hooks like useState?

Answer 3

Server Components lack access to browser APIs and client-side state, making hooks reliant on client runtime incompatible.

Question 4

How do Server Components improve bundle size?

Answer 4

They exclude server-only code (e.g., large libraries like marked) from client bundles, reducing JavaScript payloads.

Question 5

What is the primary advantage of Server Components over SSR?

Answer 5

Server Components enable granular, component-level server rendering without requiring full-page reloads or hydration.

Question 6

How do you nest a Server Component inside a Client Component?

Answer 6

Use the children prop in the Client Component as a placeholder, then pass the Server Component as a child in the parent.

Question 7

What is the role of Suspense in Server Components?

Answer 7

Suspense streams Server Component outputs incrementally, allowing placeholders (e.g., loading spinners) while content loads.

Question 8

How do Server Components handle data fetching?

Answer 8

They fetch data directly on the server during rendering, eliminating client-server waterfalls and enabling parallel data+UI streaming.

Question 9

Can Server Components import Client Components?

Answer 9

Yes, but Client Components cannot import Server Components due to runtime environment incompatibilities.

Question 10

What is the difference between Server Components and SSR?

Answer 10

SSR generates full-page HTML on the server, while Server Components render specific UI parts on the server and integrate with client-side React.

Question 11

How do Server Components interact with browser APIs like localStorage?

Answer 11

They cannot—Server Components run on the server, so browser APIs must be used in Client Components or via server-side abstractions.

Question 12

What is “hydration” in the context of Client Components?

Answer 12

Hydration attaches client-side JavaScript to server-rendered HTML, enabling interactivity and state management.

Question 13

Why are Server Components not hydrated?

Answer 13

They produce static HTML without client-side interactivity, eliminating hydration costs and JavaScript overhead.

Question 14

How do Server Components impact SEO?

Answer 14

They improve SEO by default, as search engines receive fully rendered HTML without requiring client-side JavaScript execution.

Question 15

What is a “shared component” in RSC architecture?

Answer 15

A component that runs on both server and client, often used as a starting point before specialization into Server/Client Components.

Question 16

How do Server Actions work in React 19?

Answer 16

Server Actions are functions annotated with ‘use server’ that run on the server, invoked from Client Components via form submissions or events.

Question 17

What is the renderToPipeableStream API used for?

Answer 17

It serializes Server Component outputs into a streamable format, enabling progressive HTML delivery to the client.

Question 18

How does RSC handle dynamic data updates?

Answer 18

By revalidating server-rendered content via Server Actions or revalidatePath, triggering server re-renders without full-page reloads.

Question 19

Why are keys important when rendering lists in RSC?

Answer 19

Keys help React track dynamic list items across server/client renders, ensuring stable updates and minimizing unnecessary re-renders.

Question 20

What is the main criticism of React Server Components?

Answer 20

Critics argue RSC blurs server/client boundaries, risking tightly coupled architectures reminiscent of early PHP-like spaghetti code.

Question 21

True or False: React 19 supports automatic batching of updates.

Answer 21

True

Question 22

What is the purpose of the new ‘useDeferredValue’ hook in React 19?

Answer 22

To defer re-rendering of non-urgent updates.

Question 23

Fill in the blank: React 19 introduces a new way to manage __________ in concurrent mode.

Answer 23

suspense

Question 24

What does the ‘startTransition’ API do in React 19?

Answer 24

It allows you to mark updates as non-urgent.

Question 25

What is the new 'useTransition' hook used for?

Answer 25

To manage state transitions with priority.

Question 26

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

Answer 26

True

Question 27

What is the key feature of the new 'React Server Components' in React 19?

Answer 27

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

Question 28

What is the significance of 'React 19's Automatic Error Boundaries'?

Answer 28

They automatically catch errors in component trees.

Question 29

What new feature allows for easier tracking of component performance in React 19?

Answer 29

React Profiler API enhancements

Question 30

What does the 'useId' hook do in React 19?

Answer 30

It generates unique IDs for accessibility and rendering.

Question 31

True or False: React 19 allows for concurrent rendering without breaking existing code.

Answer 31

True

Question 32

What is the purpose of the 'useSyncExternalStore' hook introduced in React 19?

Answer 32

To subscribe to external data sources.

Question 33

What does the new 'SuspenseList' component do?

Answer 33

It coordinates multiple suspense components.

Question 34

What major improvement does React 19 bring to the context API?

Answer 34

Better performance and simpler updates.

Question 35

What is a key benefit of using the 'useInsertionEffect' hook?

Answer 35

It allows for DOM mutations before the browser paints.

Question 36

What is the purpose of the 'useLayoutEffect' hook?

Answer 36

To perform side effects synchronously after all DOM mutations.

Question 37

What is the role of 'React.lazy'?

Answer 37

To enable code-splitting by loading components lazily.

Question 38

What does the 'React.Fragment' component do?

Answer 38

It allows grouping multiple elements without adding extra nodes.

Question 39

What is the significance of the 'useImperativeHandle' hook?

Answer 39

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

Question 40

What is the core difference between React state and signals?

Answer 40

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.

Question 41

How do signals track dependencies differently from React state?

Answer 41

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

Question 42

What is a signal in the context of frontend development?

Answer 42

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

Question 43

How does React handle state changes by default?

Answer 43

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

Question 44

What setup is required to use signals in React?

Answer 44

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

Question 45

What is a potential drawback of using signals in large React applications?

Answer 45

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

Question 46

Can signals be used with class components in React?

Answer 46

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

Question 47

What is a limitation of signals regarding debugging?

Answer 47

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

Question 48

In what types of projects are signals most beneficial?

Answer 48

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

Question 49

How do signals compare to Redux and Context API for state management?

Answer 49

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

Question 50

What is automatic dependency tracking in the context of signals?

Answer 50

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

Question 51

Why might React not fully adopt signals as a default approach?

Answer 51

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