Q: What are React's design principles?

**Target Audience:** Engineers preparing for senior React interviews — assumes broad familiarity with the API. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . This is a discussion question rather than a mechanical one, so instead of a "Verified" section it cites the React team own published principles and ties each to a concrete API you already use. ## 1. Why This Even Matters — A Story First

Question 1

createContext vs use(Context) — new context consumption in React 19

Accepted Answer

# `createContext` vs. `use(Context)`: New Context Consumption in React 19

**Target Audience:** Frontend engineers preparing for React interviews — assumes basic familiarity with Context and Hooks.
**Difficulty:** Medium

> **How to read this doc:** Every concept is explained in plain language first. Right after, you'll see a callout like `📌 Interview term:` — that's the exact vocabulary a senior engineer would use for the same idea.

## 1. Why This Even Matters — A Story First

Think of Contex

Question 2

How do you handle side effects in functional components?

Accepted Answer

**Target Audience:** Frontend engineers preparing for React interviews — assumes basic familiarity with Hooks. **Difficulty:** Medium > **How to read this doc:** Every concept is explained in plain language first, then tagged with 📌 Interview term: — the exact vocabulary an interviewer expects. Every ordering and lifecycle claim below was produced by actually running React 19.2.8 in a real DOM (jsdom) in this repo, not described from documentation. ## 1. Why This Even Matters — A

Question 3

What is the role of `react-dom`?

Accepted Answer

**Target Audience:** Frontend engineers preparing for React interviews — assumes basic familiarity with components. **Difficulty:** Easy to Medium > **How to read this doc:** Every concept is explained in plain language first. Right after, you will see a callout like 📌 Interview term: — that is the exact vocabulary a senior engineer would use for the same idea. Every package-export and behavioural claim below was produced by actually running React 19.2.8 in this repo, not describe

Question 4

What is the purpose of the `key` prop when rendering lists in React?

Accepted Answer

**Target Audience:** Engineers preparing for React interviews — assumes rendering lists. **Difficulty:** Easy to Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term:. The mismatch in section 3 was produced by typing into a real input and then reordering the list on React 19.2.8. ## 1. Why This Even Matters — A Story First A cloakroom numbers its hooks rather than its coats. Hook 1, hook 2, hook 3. It works perfectl

Question 5

What are the advantages of using React over plain JavaScript?

Accepted Answer

**Target Audience:** Engineers preparing for React interviews — assumes JavaScript and DOM basics. **Difficulty:** Easy to Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term:. This is a trade-off question, so the answer below deliberately includes the costs — an interviewer is often testing whether you can argue against your own tool. ## 1. Why This Even Matters — A Story First Picture a whiteboard tracking a foot

Question 6

What are fragments in React?

Accepted Answer

**Target Audience:** Engineers preparing for React interviews — assumes basic JSX. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term:. The DOM output in section 3 was produced by rendering both versions in React 19.2.8 and reading back the real HTML. ## 1. Why This Even Matters — A Story First You need to post three documents. The post office insists on one item, so you put them in an envelope. Fine

Question 7

How do you manage component-level state without `useState` or `useReducer`?

Accepted Answer

**Target Audience:** Engineers preparing for React interviews — assumes hooks basics. **Difficulty:** Easy to Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term:. The class-component behaviour in section 3 was verified by rendering and clicking one on React 19.2.8 — worth checking rather than assuming, given how much has been removed from React 19. ## 1. Why This Even Matters — A Story First A kitchen has a whiteb

Question 8

What is `create-react-app` and when would you use it?

Accepted Answer

**Target Audience:** Engineers preparing for React interviews — assumes you have started a React project before. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term:. The deprecation status below was checked against the React team announcement rather than recalled — this is a topic where an out-of-date answer is very visible, so the source is cited inline. ## 1. Why This Even Matters — A Story First <

Question 9

What are React's design principles?

Accepted Answer

**Target Audience:** Engineers preparing for senior React interviews — assumes broad familiarity with the API. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term:. This is a discussion question rather than a mechanical one, so instead of a "Verified" section it cites the React team own published principles and ties each to a concrete API you already use. ## 1. Why This Even Matters — A Story First

Question 10

How does React handle security concerns like XSS?

Accepted Answer

**Target Audience:** Engineers preparing for React interviews — assumes basic JSX. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every security behaviour below was produced by actually rendering the hostile input in React 19.2.8 and reading back the resulting DOM — including one result that contradicts a lot of older writing on this topic. ## 1. Why This Even Matters — A Story First A good l

REACT.JSDECODED.

Easy

createContext vs use(Context) — new context consumption in React 19

How do you handle side effects in functional components?

What is the role of `react-dom`?

What is the purpose of the `key` prop when rendering lists in React?

What are the advantages of using React over plain JavaScript?

What are fragments in React?

How do you manage component-level state without `useState` or `useReducer`?

What is `create-react-app` and when would you use it?

Medium

What are React's design principles?

How does React handle security concerns like XSS?

What are render props and how do they work?

Explain the concept of reconciliation in React.

Explain the concept of 'composition' in React components.

How do you handle asynchronous operations in React functional components?

What is the Context API in React and when would you use it?

How does React's Batching work?

Hard

What problem does `useSyncExternalStore` solve?

How do you optimize React component rendering?

How do you avoid re-renders with composition instead of memoization?

What is `useDeferredValue` and how does it differ from debouncing?

How do Suspense data-fetching waterfalls happen, and how do you avoid them?

What is server-side rendering (SSR) and when would you use it with React?

React Server Components vs SSR — what is the real difference?

Why does updating Context re-render all its consumers, and how do you fix it?