React 100: The Field Guide

100 crucial beginner-level React JS interview questions and answers. Read through full-width, mobile-optimized topics covering Hooks, Rendering, and the new React 19 updates.

1. React Basics & JSX 2. Components & Props 3. State, Events & Forms 4. Hooks 5. Lifecycle & Effects 6. Lists & Conditional Rendering 7. Context, Refs & Performance 8. Routing & Ecosystem Basics 9. React 19 — What’s New 10. Tooling, Best Practices & Misc
Swipe for more topics →

1. React Basics & JSX

Q1
What is React, and what problem does it solve?
React is a JavaScript library for building user interfaces, created by Facebook (Meta). It solves the problem of keeping the UI in sync with changing data by letting you describe what the UI should look like for a given state, and React handles updating the actual DOM efficiently behind the scenes.
Q2
What is JSX?
JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup directly inside JavaScript. It makes component code easier to read and write, and it gets compiled into regular React.createElement() calls before running in the browser.
Q3
Why can’t browsers run JSX directly?
Browsers only understand plain JavaScript, not JSX syntax. Tools like Babel, or the compiler built into bundlers such as Vite or webpack, transpile JSX into React.createElement() (or the newer jsx() runtime) calls that browsers can execute.
Q4
What is the Virtual DOM?
The Virtual DOM is a lightweight in-memory representation of the real DOM, kept as a tree of plain JavaScript objects. React updates this virtual tree first, compares it to the previous version, and then applies only the necessary changes to the real DOM.
Q5
How does the Virtual DOM improve performance compared to direct DOM manipulation?
Direct DOM updates are expensive because the browser has to recalculate layout and repaint. By comparing virtual trees first (a process called diffing) and batching changes, React figures out the minimal set of real DOM operations needed and applies them together, reducing costly reflows.
Q6
What is the difference between React and ReactDOM?
react contains the core library: components, hooks, and the logic for describing UI. react-dom is the renderer that knows how to take that description and mount it into a web page’s DOM (a separate package, react-native, renders to native mobile views instead).
Q7
What is the difference between a React element and a React component?
A React element is a plain, immutable object describing what to render, usually created via JSX. A component is a function (or class) that returns elements; elements are the blueprint output, and components are the factories that produce them.
Q8
Can you write JavaScript expressions inside JSX, and how?
Yes, by wrapping the expression in curly braces, e.g. <p>{user.name}</p> or <p>{2 + 2}</p>. Only expressions are allowed, not statements, so you can’t put an if block directly inside braces, though ternaries and logical operators work fine.
Q9
How do you return multiple sibling elements from a component without adding an extra wrapper div?
Wrap them in a React Fragment, written as <React.Fragment>...</React.Fragment> or the shorthand <>...</>. Fragments satisfy JSX’s one-root-element rule without adding any extra node to the actual DOM.
Q10
Is Create React App still the recommended way to start a new React project?
No. Create React App is no longer actively maintained and isn’t recommended by the React team. Modern projects typically start with Vite (npm create vite@latest) for plain React apps, or a framework like Next.js or Remix when server rendering and routing are needed.
Q11
Why is React called a library rather than a framework?
React focuses on one job, rendering UI from components, and deliberately leaves routing, state management, and data fetching to other libraries you choose yourself. Frameworks bundle a more complete, opinionated set of these tools together.
Q12
What is a single-page application (SPA), and how does React help build one?
An SPA loads a single HTML page and then updates content dynamically with JavaScript instead of requesting a new page from the server on every navigation. React’s component model and virtual DOM make it well suited to re-render just the parts of the page that change.

2. Components & Props

Q13
What is a component in React?
A component is a reusable, self-contained piece of UI, written as a JavaScript function (or class) that accepts inputs called props and returns JSX describing what should appear on screen.
Q14
What’s the difference between functional and class components?
Functional components are plain JavaScript functions that return JSX and use hooks for state and side effects. Class components extend React.Component, manage state with this.state, and use lifecycle methods like componentDidMount instead of hooks.
Q15
Why are function components preferred over class components today?
Function components are shorter, easier to read, and avoid the confusing behavior of the this keyword. Hooks also let you share stateful logic between components more easily than the older patterns class components required.
Q16
What are props in React?
Props (“properties”) are read-only inputs passed from a parent component into a child component, similar to function arguments. They let you customize a component’s content or behavior without changing the component’s own code.
Q17
Are props mutable or immutable?
Props are immutable from the child’s perspective. A component should never reassign or modify its own props directly; if a value needs to change, that change should happen in the parent that owns the state, then flow back down as a new prop.
Q18
How do you set default values for props?
In modern React, give the destructured parameter a default value directly: function Button({ size = 'medium' }) {...}. The older Component.defaultProps = {...} pattern still works but is being phased out.
Q19
What is props drilling, and why can it be a problem?
Props drilling is passing a prop down through several layers of components that don’t use it themselves, just to get it to a deeply nested child. It makes components harder to reuse and refactor, since unrelated components get coupled by data they don’t need.
Q20
What is the children prop?
children is a special prop containing whatever is nested between a component’s opening and closing tags, e.g. <Card>Hello</Card> gives Card a children prop equal to “Hello”. It’s commonly used to build wrapper or layout components.
Q21
Can a component return null? What happens then?
Yes. Returning null (or false, or undefined) tells React to render nothing for that component, while the component itself stays mounted and can still respond to future prop or state changes.
Q22
What is component composition, and why is it preferred over inheritance in React?
Composition means building complex UI by combining smaller components together, often via the children prop, rather than extending a base component class. React’s team recommends composition because it’s more flexible and avoids fragile class hierarchies.

3. State, Events & Forms

Q23
What is state in React?
State is data that a component owns and manages internally, which can change over time, typically as a result of user interaction. Unlike props, state isn’t passed in from outside; updating it causes the component to re-render with the new value.
Q24
What’s the difference between props and state?
Props are passed into a component from its parent and are read-only from the receiving side. State is local data a component manages itself with hooks like useState, and only that component (or what it explicitly passes down) can change it.
Q25
How do you update state correctly in a function component?
You call the setter function returned by useState, e.g. const [count, setCount] = useState(0); setCount(count + 1);. Calling the setter, rather than reassigning the variable directly, is what tells React to schedule a re-render.
Q26
Why shouldn’t you mutate state directly, e.g. pushing into a state array?
React detects changes by comparing references, not deep contents, so mutating an object or array in place won’t trigger a re-render and can lead to stale UI. Instead, create a new array or object, for example with spread syntax, and pass that to the setter.
Q27
What happens when you call a state setter function?
React schedules a re-render of that component and its children with the new state value, batching it with other updates for efficiency. The re-render doesn’t happen synchronously the instant you call the setter; it happens before the next paint.
Q28
Why doesn’t a state variable show its new value immediately on the next line of code after calling its setter?
State updates are asynchronous and tied to the next render, while the variable you’re reading in the current call is a snapshot from the render already in progress. To act on the new value immediately, use it before calling the setter, or move that logic into a useEffect that runs after the re-render.
Q29
What is the difference between controlled and uncontrolled components in forms?
A controlled component has its value driven by React state, with value and onChange wired together so React is the single source of truth. An uncontrolled component lets the DOM manage its own value internally, read later via a ref when needed.
Q30
How do you handle a form input’s onChange event in React?
Attach an onChange handler that reads event.target.value and stores it in state, e.g. <input value={name} onChange={(e) => setName(e.target.value)} />. This keeps the input controlled by React state.
Q31
How do you handle form submission and prevent the browser’s default behavior?
Attach an onSubmit handler to the <form> element and call event.preventDefault() before running your own submission logic. Without that call, the browser would try to reload the page or navigate, which isn’t usually what you want.
Q32
What is a SyntheticEvent in React?
SyntheticEvent is React’s cross-browser wrapper around the browser’s native event object, normalizing differences between browsers so event handlers behave consistently. It mirrors the native event’s API, like target and preventDefault(), while integrating with React’s event system.
Q33
How do you pass an argument to an event handler in JSX?
Wrap the call in an arrow function so it isn’t invoked immediately during render, e.g. <button onClick={() => handleDelete(item.id)}>Delete</button>. Writing onClick={handleDelete(item.id)} without the arrow function would call it during render instead of on click.
Q34
What is the new way to handle forms in React 19 using Actions?NEW · 19
React 19 lets you pass a function directly to a form’s action prop (or a button’s formAction prop); React calls it automatically on submission and can handle pending and error states for you. This is often paired with the new useActionState hook to simplify form-handling boilerplate.

4. Hooks

Q35
What are hooks in React?
Hooks are functions, like useState and useEffect, that let function components use features such as state and side effects that used to only be available in class components. They always start with the word “use” by convention.
Q36
What are the rules of hooks?
Hooks must only be called at the top level of a function component or custom hook, never inside loops, conditions, or nested functions, and they must always be called in the same order on every render. This consistent order is how React tracks which state belongs to which useState call.
Q37
What does useState return?
It returns an array with exactly two elements: the current state value, and a setter function used to update that value, e.g. const [count, setCount] = useState(0).
Q38
Can you use multiple useState calls in a single component?
Yes, and it’s common practice. Splitting unrelated pieces of state into separate useState calls, instead of one big state object, usually makes components easier to read and update.
Q39
What is useEffect used for?
useEffect lets you run side effects, code that interacts with something outside of rendering, like fetching data, subscribing to events, or manually updating the document title, after the component renders.
Q40
What is the dependency array in useEffect?
It’s the second argument to useEffect, an array of values the effect depends on. React re-runs the effect only when one of those values has changed since the last render, instead of on every render.
Q41
What happens if you omit the dependency array entirely in useEffect?
The effect runs after every single render, which is rarely what you want and can cause performance issues or infinite loops if the effect itself triggers a state update.
Q42
What is a cleanup function in useEffect, and when is it called?
It’s a function you optionally return from inside your effect, used to undo things like subscriptions, timers, or event listeners. React calls it right before the component unmounts, and before re-running the effect due to a dependency change.
Q43
What is useContext, and what problem does it solve?
useContext lets a component read a value from a Context Provider higher up the tree without it being passed down manually through every intermediate component. It’s the main way to avoid props drilling for things like themes or authenticated user info.
Q44
What is useRef, and how is it different from useState?
useRef returns a mutable object with a .current property that persists across renders, but changing it does not trigger a re-render the way a state update does. It’s commonly used to reference a DOM node directly or store a value without re-rendering.
Q45
When would you use useRef instead of state?
Use useRef when you need to access a DOM element directly, such as focusing an input, or store a mutable value, like a timer ID or previous value, that shouldn’t cause the component to re-render whenever it changes.
Q46
What is useMemo, and when should you use it?
useMemo caches the result of an expensive calculation and only recomputes it when its dependencies change, instead of on every render. It’s best used when profiling shows a calculation is actually slow enough to matter, not by default on every computed value.
Q47
What is useCallback, and how is it different from useMemo?
useCallback memoizes a function itself so the same reference is reused across renders unless its dependencies change, while useMemo memoizes the return value of a computation. They’re often used together to avoid unnecessary re-renders of memoized child components.
Q48
What is a custom hook, and how do you create one?
A custom hook is a regular JavaScript function, starting with “use”, that calls other hooks inside it to encapsulate and reuse stateful logic across components, for example function useWindowWidth() {...} returning the current width.
Q49
What naming convention must custom hooks follow, and why?
Custom hook names must start with the lowercase word “use”, such as useFetch or useAuth. This convention lets React’s linter and rules-of-hooks checks correctly identify which functions are hooks so they can be checked for proper usage.
Q50
What is the use() hook introduced in React 19, and what makes it different from other hooks?NEW · 19
use() lets a component read the value of a Promise or a Context, and unlike other hooks, it can be called conditionally or inside loops. It’s often used to read data from a Promise passed down from a Server Component, letting the component wait for that value as part of rendering.

5. Lifecycle & Effects

Q51
What are the three phases of a component’s lifecycle?
Mounting (the component is created and inserted into the DOM), updating (the component re-renders due to changed props or state), and unmounting (the component is removed from the DOM).
Q52
What lifecycle phase does a useEffect with no dependency array correspond to?
It runs after every render, so it loosely corresponds to a combination of componentDidMount and componentDidUpdate running on every single update.
Q53
What lifecycle phase does useEffect with an empty dependency array correspond to?
It runs only once, right after the initial mount, similar to componentDidMount in class components, since an empty array means there are no dependencies that could ever change.
Q54
How do you replicate componentWillUnmount behavior in function components?
Return a cleanup function from inside useEffect. React calls that returned function when the component is about to unmount, or before re-running the effect again, which is the functional equivalent of componentWillUnmount.
Q55
What is the difference between useEffect and useLayoutEffect?
useEffect runs asynchronously after the browser has painted the screen, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints. useLayoutEffect is reserved for rare cases like measuring layout and adjusting it before the user sees a flicker.
Q56
Why might an effect run twice in development mode with React 18 and later?
In development with StrictMode, React intentionally mounts, unmounts, and remounts components once to help you catch effects that aren’t cleaning up properly. This double-invoking only happens in development, not in production builds.
Q57
What is the danger of fetching data directly in the component body instead of inside useEffect?
Code that runs directly during render executes on every single render, so an unprotected fetch call there would re-trigger the request constantly and could cause infinite loops, especially if the fetch also sets state.
Q58
What is StrictMode, and why is it useful during development?
StrictMode is a wrapper component that renders no visible UI but activates extra checks, like double-invoking effects and detecting unsafe lifecycle usage, to help surface bugs in development before they reach production.

6. Lists, Keys & Conditional Rendering

Q59
How do you render a list of items in React?
Use JavaScript’s .map() to transform an array of data into an array of JSX elements, e.g. {items.map(item => <li key={item.id}>{item.name}</li>)}.
Q60
Why does React require a key prop when rendering lists?
Keys give React a stable identity for each item across renders, so it can correctly figure out which items were added, removed, or reordered instead of re-rendering the entire list from scratch.
Q61
Why is using the array index as a key sometimes problematic?
If the list can be reordered, filtered, or have items inserted or removed, the index of a given item changes even though the item itself didn’t, which can cause React to mismatch state or DOM nodes between the wrong items.
Q62
What’s a good key to use if your data doesn’t already have a unique id?
Generate one when the data is created, using something like crypto.randomUUID(), a database-assigned id once it’s saved, or a stable combination of fields guaranteed not to repeat, rather than relying on array position.
Q63
How do you conditionally render JSX based on a boolean?
Common approaches are a ternary expression, condition ? <A /> : <B />, the && operator for an either-render-or-nothing case, condition && <A />, or an early if/return before the main JSX in the component function.
Q64
What is the && trick for conditional rendering, and what is one pitfall of it?
Writing {count && <p>{count} items</p>} renders the JSX only if count is truthy. The pitfall is that if count is 0, JavaScript’s && still evaluates to 0, so React renders a literal 0 on the page instead of nothing.
Q65
How do you render a fallback UI when there’s no data, e.g. an empty array?
Check the array’s length before mapping, e.g. {items.length === 0 ? <EmptyState /> : items.map(...)}, so the user sees a helpful message instead of a blank section.
Q66
How do you render a list of components and pass each item’s data as props?
Map over the array and pass each item’s fields as props to a child component, e.g. {users.map(u => <UserCard key={u.id} name={u.name} email={u.email} />)}.

7. Context, Refs & Performance

Q67
What problem does the Context API solve?
Context lets you share a value, like a theme, logged-in user, or language setting, across many components at different nesting levels without manually passing it down as a prop through every component in between.
Q68
How do you create and provide a context?
Create it with const ThemeContext = createContext(defaultValue), wrap the part of your tree that needs it with <ThemeContext.Provider value={theme}>, and read it in any descendant with useContext(ThemeContext).
Q69
What is the simplified syntax for using Context as a provider directly in React 19?NEW · 19
React 19 allows rendering the context object itself as a provider, e.g. <ThemeContext value={theme}>, instead of writing out <ThemeContext.Provider value={theme}> every time, slightly reducing boilerplate.
Q70
How does Context help avoid props drilling?
Instead of threading a value through every intermediate component as a prop just so a deeply nested child can use it, that child can call useContext directly and read the value from the nearest matching Provider above it.
Q71
What is React.memo, and when should you use it?
React.memo wraps a component so React skips re-rendering it if its props haven’t changed, using a shallow comparison. It’s best applied to components that render often with the same props and are expensive enough that skipping the re-render is worth it.
Q72
What causes unnecessary re-renders in React?
Common causes include a parent re-rendering and passing new object, array, or function references as props on every render even when the values are logically the same, or state updates that don’t actually need to affect a particular branch of the tree.
Q73
What is reconciliation in React?
Reconciliation is the algorithm React uses to compare a newly rendered virtual DOM tree against the previous one and determine the minimal set of real DOM changes needed to bring them in sync, rather than rebuilding the whole DOM from scratch.
Q74
What is the purpose of forwardRef, and how has React 19 changed the need for it?NEW · 19
forwardRef lets a parent pass a ref through a custom component down to one of its underlying DOM nodes, since refs aren’t a regular prop by default in older React versions. In React 19, function components can accept ref as a normal prop directly, so wrapping them in forwardRef is no longer required in most cases.
Q75
What is lazy loading in React, and how do you implement it with React.lazy and Suspense?
Lazy loading delays loading a component’s code until it’s actually needed, reducing the initial bundle size. Wrap a dynamic import with React.lazy(() => import('./Component')) and render it inside a <Suspense fallback={<Spinner />}> boundary that shows a fallback while the code loads.
Q76
What is code splitting, and why does it matter even for beginners to know about?
Code splitting breaks an app’s JavaScript into smaller chunks that load on demand instead of one giant bundle upfront. Knowing it exists helps explain why some parts of an app might briefly show a loading state and why bundlers like Vite create multiple output files.

8. Routing & Ecosystem Basics

Q77
Does React include built-in routing? What do you use instead?
No, React itself has no built-in router. For multi-page-feeling SPAs, developers commonly add a separate library like React Router, or use a framework such as Next.js or Remix that includes routing out of the box.
Q78
What is the difference between client-side routing and a traditional page reload?
Client-side routing updates the URL and swaps which components are rendered using JavaScript, without making a fresh request to the server or reloading the whole page. A traditional page reload tears down the page and re-downloads everything from the server.
Q79
What is React Router, and what are its core building blocks?
React Router is the most widely used routing library for React. Its core pieces are <Routes> and <Route path="..." element={...} /> to define which component renders for a given URL, and <Link to="..."> to navigate between routes without a full page reload.
Q80
What is the difference between React Router’s Link and a normal anchor tag?
A normal <a> tag triggers a full browser page reload when clicked. <Link> intercepts the click and updates the route using JavaScript instead, preserving the SPA’s in-memory state and avoiding the cost of reloading the page.
Q81
What are some common state management options beyond useState and Context for bigger apps?
Popular choices include Redux Toolkit, Zustand, Jotai, and Recoil for general client state, plus libraries like React Query or SWR specifically for managing server and data-fetching state with caching.
Q82
Why does a React project need a package.json, and what role do npm, yarn, or pnpm play?
package.json lists a project’s dependencies, like react and react-dom, and scripts, like npm run dev. Package managers such as npm, yarn, or pnpm read that file to install the exact library versions a project needs and to run those scripts.

9. React 19 — What’s New

Q83
What is the headline feature of React 19 related to forms and async operations?NEW · 19
Actions: you can pass an async function directly to a <form action={...}> or a button’s formAction, and React automatically manages pending states, errors, and optimistic updates around it, removing a lot of manual onSubmit and loading-state boilerplate.
Q84
What is useActionState, and what problem does it solve?NEW · 19
useActionState takes an action function and an initial state, and returns the current state, a wrapped action to pass to a form, and a pending flag. It removes the need to manually wire up useState plus an onSubmit handler just to track a form’s result and loading status.
Q85
What is useFormStatus, and where can it be used?NEW · 19
useFormStatus returns the pending status, and submitted data, of the nearest parent <form>, but it must be called inside a component rendered as a descendant of that form, not the form’s own component. It’s handy for a reusable submit button that automatically disables itself while submitting.
Q86
What is useOptimistic, and what UX problem does it solve?NEW · 19
useOptimistic lets you show a temporary, optimistic version of state immediately while an async update is still in flight, then reconciles it with the real result once the server responds. It solves the lag between a user’s action, like liking a post, and the UI visibly reflecting it.
Q87
Can you use ref as a normal prop on function components in React 19 without forwardRef?NEW · 19
Yes. React 19 allows function components to receive ref directly as a regular prop, similar to any other prop, so forwardRef is no longer required for most simple ref-forwarding use cases, though it’s still supported for backward compatibility.
Q88
What is Document Metadata support in React 19?NEW · 19
You can render tags like <title>, <meta>, and <link> directly inside any component, even deep in the tree, and React automatically hoists them up into the document’s <head> rather than rendering them where they appear in the JSX.
Q89
What are the Asset Loading APIs introduced in React 19?NEW · 19
Functions like preload, preinit, preconnect, and prefetchDNS, from react-dom, let you hint to the browser to start fetching a stylesheet, font, script, or domain connection earlier, before the resource is actually needed, to speed up loading.
Q90
What are Server Components, briefly, and how do they differ from regular components?NEW · 19
Server Components render entirely on the server and send only the resulting UI description to the browser, with no extra JavaScript shipped for them. Regular client components run their JavaScript in the browser and can use state, effects, and event handlers, which Server Components cannot do directly.
Q91
What is the React Compiler, and what problem is it trying to solve?NEW · 19
The React Compiler is a build-time tool that automatically analyzes component code and inserts memoization, similar to what you’d write by hand with useMemo or useCallback, so components skip unnecessary re-renders without manual optimization.
Q92
Does the React Compiler replace useMemo and useCallback?NEW · 19
For most everyday cases, yes, since the compiler can apply equivalent optimizations automatically. You can still write useMemo or useCallback by hand for edge cases it doesn’t catch, but the goal is that beginners increasingly won’t need to reach for them manually.
Q93
What is a Server Action, and how does it relate to React 19’s Actions feature?NEW · 19
A Server Action is a function marked to run on the server, commonly with a use server directive in frameworks like Next.js, that a client component can call directly. It’s often wired up through the same action prop used by React 19’s form Actions, letting submissions trigger server-side logic without writing a separate API route by hand.
Q94
Is class component support removed in React 19?NEW · 19
No, class components still work in React 19. However, some already-deprecated APIs, like string refs and module-pattern factories, were removed, and the React team continues to recommend function components with hooks for any new code.

10. Tooling, Best Practices & Misc

Q95
What is the recommended way to start a new React project today instead of Create React App?
For a plain client-rendered React app, Vite, via npm create vite@latest with the React template, is the common recommendation. If routing, server rendering, or a fuller app structure is needed, a framework like Next.js or Remix is usually a better starting point.
Q96
What are React DevTools, and why are they useful?
React DevTools is a browser extension that lets you inspect the component tree, view and edit props or state live, and profile renders to find performance issues. It’s invaluable for debugging why a component re-rendered or why a prop isn’t updating as expected.
Q97
What is the difference between React and React Native?
React renders to the browser DOM for web applications, while React Native uses the same component and hooks model but renders to native mobile UI elements, like real iOS or Android views, instead of HTML, letting you build mobile apps with similar React concepts.
Q98
What’s a common beginner mistake when working with array state?
Calling array-mutating methods like .push(), .splice(), or .sort() directly on a state array. Since these mutate in place and don’t create a new array reference, React won’t detect the change; the fix is non-mutating approaches like [...array, newItem] or .filter()/.map() to build a new array.
Q99
Why is it risky to use the array index as both the rendering key and the identifier for delete or update operations?
If an item is deleted or reordered, every item after it shifts to a new index, so an index-based identifier no longer points to the same logical item; this can cause you to delete or edit the wrong item entirely, not just cause a rendering glitch.
Q100
What’s one general tip for approaching a React coding interview as a beginner?
Talk through your reasoning out loud as you go, such as why you chose useState over useRef, or why a particular key is safe to use, since interviewers are usually evaluating your understanding of why, not just whether the final code runs.