Q: What is `PropTypes` and when would you use it?

**Core concept (TL;DR).** PropTypes (the prop-types package) is a **runtime** type-checker for component props: in **development** it warns in the console when a prop is the wrong type or a required prop is missing. It predates TypeScript adoption — today TS is preferred (compile-time), but PropTypes is still useful in **plain-JS** codebases or libraries. <div style="margin:1.25rem auto;max-width:560px;border:1px solid rgba(6,182,212,0.25);border-radius:14px;padding:14

Q: What is the role of `react-dom`?

**Core concept (TL;DR).** react is the renderer-agnostic core (components, hooks, elements); react-dom is the package that **renders React to the browser DOM**. It provides createRoot / render (mount an app), hydrateRoot (attach to SSR HTML), createPortal , and flushSync . <div style="margin:1.25rem auto;max-width:560px;border:1px solid rgba(6,182,212,0.25);border-radius:14px;padding:14px;background:rgba(6,18

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

**Core concept (TL;DR).** key gives each item in a list a **stable identity** so React can match elements between renders during reconciliation. With correct keys, React updates/moves only what changed instead of re-creating the whole list. Keys must be **unique among siblings** and **stable** — use a real id, not the array index. <

Q: Explain the concept of 'lifting state up' in React.

**Core concept (TL;DR).** When two or more components need to share or stay in sync over the same data, you move that state **up to their nearest common ancestor** and pass it down as props (with callbacks to update it). The parent becomes the **single source of truth**; the children become controlled by it. <svg viewBox="0 0 520 156" style="wid

Q: What are the advantages of using React over plain JavaScript?

**Core concept (TL;DR).** With plain JS you **imperatively** find and mutate DOM nodes — verbose and error-prone as apps grow. React lets you write **declarative**, **component-based** UIs driven by state: you describe the result and React efficiently updates the DOM (via the virtual DOM). You gain reuse, maintainability, predictable state, and a vast ecosystem. <div style="margin:1.25rem auto;max-width:560px;border:1px solid rgba(6,182,212,0.25);border-radius:14px;padding:14px;background:rgba(

Q: How do you pass data between components in React?

**Core concept (TL;DR).** It depends on the relationship. **Parent → child:** props. **Child → parent:** call a **callback** prop the parent passed. **Between siblings:** lift the state to their common parent. **Between distant components:** **Context** or an external **store**. <svg viewBox="0 0 520 162" style="width:100%;display:block" xmlns="

Question 1

What are React synthetic events?

Accepted Answer

**Core concept (TL;DR).** A SyntheticEvent is React's **cross-browser wrapper** around the native DOM event. It gives every event a consistent API (preventDefault, stopPropagation, target) regardless of browser quirks, and you can always reach the underlying event via e.nativeEvent.

Question 2

What are React Hooks? Name a few common ones.

Accepted Answer

**Core concept (TL;DR).** Hooks are special functions (named use*) that let **function components** use React features — state, lifecycle/side effects, context — that previously required class components. The everyday ones are useState, useEffect, useContext, useRef, useReducer, useMemo, and useCallback.

Question 3

What is `PropTypes` and when would you use it?

Accepted Answer

**Core concept (TL;DR).** PropTypes (the prop-types package) is a **runtime** type-checker for component props: in **development** it warns in the console when a prop is the wrong type or a required prop is missing. It predates TypeScript adoption — today TS is preferred (compile-time), but PropTypes is still useful in **plain-JS** codebases or libraries.

Question 4

How do you handle side effects in functional components?

Accepted Answer

**Core concept (TL;DR).** Keep rendering pure and put side effects where they belong: **user-driven** effects (a click that saves data) go in **event handlers**; effects that **synchronize with an external system** (subscriptions, fetching for the current props, manual DOM) go in useEffect. Anything you can **derive during render**, derive — don't store it in state via an effect.

Question 5

What is the role of `react-dom`?

Accepted Answer

**Core concept (TL;DR).** react is the renderer-agnostic core (components, hooks, elements); react-dom is the package that **renders React to the browser DOM**. It provides createRoot/render (mount an app), hydrateRoot (attach to SSR HTML), createPortal, and flushSync.

Question 6

What are React Developer Tools and how do you use them?

Accepted Answer

**Core concept (TL;DR).** React DevTools is a **browser extension** (and standalone app) that adds two panels: **Components** — inspect the component tree with each node's props, state, and hooks (editable live) — and **Profiler** — record renders to see **which** components rendered, **why**, and **how long** they took.

Question 7

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

Accepted Answer

**Core concept (TL;DR).** key gives each item in a list a **stable identity** so React can match elements between renders during reconciliation. With correct keys, React updates/moves only what changed instead of re-creating the whole list. Keys must be **unique among siblings** and **stable** — use a real id, not the array index.

<

Question 8

Explain the concept of 'lifting state up' in React.

Accepted Answer

**Core concept (TL;DR).** When two or more components need to share or stay in sync over the same data, you move that state **up to their nearest common ancestor** and pass it down as props (with callbacks to update it). The parent becomes the **single source of truth**; the children become controlled by it.

Question 9

What are the advantages of using React over plain JavaScript?

Accepted Answer

**Core concept (TL;DR).** With plain JS you **imperatively** find and mutate DOM nodes — verbose and error-prone as apps grow. React lets you write **declarative**, **component-based** UIs driven by state: you describe the result and React efficiently updates the DOM (via the virtual DOM). You gain reuse, maintainability, predictable state, and a vast ecosystem.

Question 10

How do you pass data between components in React?

Accepted Answer

**Core concept (TL;DR).** It depends on the relationship. **Parent → child:** props. **Child → parent:** call a **callback** prop the parent passed. **Between siblings:** lift the state to their common parent. **Between distant components:** **Context** or an external **store**.

React.js Interview Library

Question Catalog

What are React synthetic events?

What are React Hooks? Name a few common ones.

What is `PropTypes` and when would you use it?

How do you handle side effects in functional components?

What is the role of `react-dom`?

What are React Developer Tools and how do you use them?

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

Explain the concept of 'lifting state up' in React.

What are the advantages of using React over plain JavaScript?

How do you pass data between components in React?

Explain the concept of 'unidirectional data flow' in React.

What is JSX?

What is the difference between element and component in React?

What are fragments in React?

What is the Virtual DOM in React?

What is React and its main features?

How do you debug React applications?

What is the purpose of `React.StrictMode`?

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

What is the difference between state and props?

What are React Components?

What is the role of a bundler like Webpack in a React project?

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

What is the purpose of the cleanup function in useEffect?

What are React's design principles?

What is the difference between `useState` and `useReducer`?

What is the purpose of the `deps` array in `useEffect` and `useCallback`?

Describe the `useRef` hook and its typical use cases.

How does React handle security concerns like XSS?

How would you structure a large React application?

What are render props and how do they work?

Explain the concept of reconciliation in React.

Describe the React component lifecycle.

Explain the concept of 'composition' in React components.

How does React handle events?

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?

How do you test React components?

What are React custom hooks and when should you use them?

How do you fetch data in React?

What is the difference between controlled and uncontrolled components?

What is the difference between useMemo and useCallback?

How do you handle routing in React applications?

How do you handle memory leaks in React?

How do you prevent unnecessary re-renders in functional components?

How do you handle forms in React?

When would you choose a class component over a functional component with hooks?

What is 'prop drilling' and how can it be avoided?

How do you interact with external APIs in React?

How do you manage global state in a large React application?

Describe the benefits of using TypeScript with React.

What are Higher-Order Components (HOCs) in React?

Explain the purpose of `useEffect`.

What are Error Boundaries in React?

How do you optimize performance in a React application?

What is `React.memo` and when would you use it?

Explain React Suspense and its use cases.

What is the difference between shadow DOM and virtual DOM?

What causes stale closures in React hooks, and how do you fix them correctly?

What are Actions in React 19, and how do they change form handling?

What is `useFormStatus` in React 19, and why does it exist?

What are Effect Events (`useEffectEvent`) and what problem do they solve?

What does the `useActionState` hook do in React 19?

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?

Why does React 18 StrictMode double-invoke your components and effects?

How does streaming SSR with selective hydration work?

What are Portals in React and when would you use them?

How can the `key` prop be used to deliberately reset component state?

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?

How does `useOptimistic` enable optimistic UI in React 19?

When and why do you use `forwardRef` with `useImperativeHandle`?

What underlying mechanism makes the Rules of Hooks mandatory?