100% Free
🎯 3200+ Questions. One Goal: Your Success Sign In Sign Up

Entry React Interview Questions

Curated Entry-level React interview questions for developers targeting entry positions. 20 questions available.

Last updated:

React Interview Questions & Answers

Skip to Questions

Welcome to our comprehensive collection of React interview questions and answers. This page contains expertly curated interview questions covering all aspects of React, from fundamental concepts to advanced topics. Whether you're preparing for an entry-level position or a senior role, you'll find questions tailored to your experience level.

Our React interview questions are designed to help you:

  • Understand core concepts and best practices in React
  • Prepare for technical interviews at all experience levels
  • Master both theoretical knowledge and practical application
  • Build confidence for your next React interview

Each question includes detailed answers and explanations to help you understand not just what the answer is, but why it's correct. We cover topics ranging from basic React concepts to advanced scenarios that you might encounter in senior-level interviews.

Use the filters below to find questions by difficulty level (Entry, Junior, Mid, Senior, Expert) or focus specifically on code challenges. Each question is carefully crafted to reflect real-world interview scenarios you'll encounter at top tech companies, startups, and MNCs.

Questions

20 questions
Q1:

What problem does React solve compared to directly manipulating the DOM?

Entry

Answer

React uses a virtual DOM to batch updates and apply only necessary changes to the real DOM. This reduces reflow and repaint costs, making UI updates efficient and predictable.
Quick Summary: Direct DOM manipulation is slow and error-prone — every change triggers browser reflows and repaints. React introduces a virtual DOM: you describe what the UI should look like, React figures out the minimal set of real DOM updates needed. Your code stays clean; React handles the expensive DOM work efficiently.
Permalink
Q2:

What is JSX and why do we use it in React?

Entry

Answer

JSX is a JavaScript syntax extension that allows writing HTML-like code within JavaScript. It improves readability and compiles into React.createElement() calls during build.
Quick Summary: JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. It gets compiled to React.createElement() calls. It's not required but makes component structure readable and obvious — you see the tree structure directly. JSX also catches errors at compile time that string-based templates miss.
Permalink
Q3:

Why must React components start with a capital letter?

Entry

Answer

React treats lowercase tags as built-in HTML elements. Uppercase names indicate custom components so React can instantiate them correctly.
Quick Summary: React uses the capitalization to distinguish between built-in HTML elements (lowercase, like div or span) and custom components (capitalized, like MyButton). When React sees a lowercase tag, it renders the HTML element. When it sees uppercase, it looks for a component function or class with that name to call.
Permalink
Q4:

What is the purpose of the createRoot API introduced in React 18?

Entry

Answer

createRoot enables concurrent rendering, allowing React to pause, resume, or interrupt rendering to improve UI responsiveness.
Quick Summary: createRoot replaces ReactDOM.render() and enables all React 18 features including concurrent rendering. You call createRoot(domNode) once to set up the root, then .render() to display your component. The split allows React to manage multiple roots independently and enables concurrent features like Suspense and transitions.
Permalink
Q5:

What is the difference between a Component and an Element in React?

Entry

Answer

A component is a function or class defining UI logic. An element is the object returned by that component describing what to render.
Quick Summary: A React Element is a plain object describing what to render — like the output of JSX: { type: 'div', props: { children: 'Hello' } }. A Component is a function or class that returns elements. Components are the blueprint; elements are the instances produced each render. Elements are immutable snapshots; components are reusable factories.
Permalink
Q6:

What is the use of React Fragment?

Entry

Answer

Fragments (<> ) let you return multiple elements without adding extra DOM nodes, keeping layouts cleaner.
Quick Summary: Fragment lets you return multiple elements from a component without adding an extra DOM node. Instead of wrapping everything in a div (which adds unnecessary markup), you use or the shorthand <>.... This keeps the DOM clean and avoids styling issues caused by extra wrapper elements.
Permalink
Q7:

Why do we use keys in lists?

Entry

Answer

Keys help React track which list items changed, were added, or removed, enabling efficient virtual DOM reconciliation.
Quick Summary: Keys help React identify which items in a list changed, were added, or were removed between renders. Without keys, React can't tell items apart and may reuse the wrong DOM node — causing incorrect rendering, lost input state, and animation bugs. Keys must be stable, unique identifiers for each item.
Permalink
Q8:

What happens if we use the array index as a key?

Entry

Answer

Using array indexes can cause React to reuse incorrect DOM nodes, leading to bugs like wrong input values or lost component state during reorder.
Quick Summary: If items are reordered or inserted, the index shifts — React sees the key change and remounts the component, losing its state. For a list of inputs, inserting a new item at the top shifts every index, causing React to treat existing items as new ones. Use a stable unique ID (like a database ID) instead.
Permalink
Q9:

What is the difference between props and state?

Entry

Answer

Props are read-only inputs passed from parent components, while state is internal mutable data managed by the component.
Quick Summary: Props are read-only inputs passed from parent to child — the parent controls them. State is internal data owned and managed by the component itself. Props flow down; state triggers re-renders when it changes. A component can't modify its own props, but it can update its own state with a setter function.
Permalink
Q10:

Can a component modify its own props?

Entry

Answer

No. Props are immutable and controlled by the parent. Changing them breaks unidirectional data flow.
Quick Summary: No. Props are read-only by design — a component receives them from its parent and must use them as-is. Modifying props would break the data flow and make components unpredictable. If a component needs to change data, it either calls a callback prop (to let the parent update state) or manages that data in its own state.
Permalink
Q11:

What does useState() return?

Entry

Answer

useState returns an array with the current state value and a function to update that state.
Quick Summary: useState returns an array with two things: the current state value and a setter function. const [count, setCount] = useState(0) — count holds the current value, setCount triggers a re-render with the new value. The initial value (0 here) is only used on the first render.
Permalink
Q12:

Why doesn’t updating state directly trigger a re-render?

Entry

Answer

React re-renders only when the state updater function is called. Direct mutation does not notify React.
Quick Summary: React tracks state through its setter function, not the object itself. When you do state.count = 5 directly, React never knows anything changed and doesn't schedule a re-render. You must call setState(newValue) — that's what signals React to diff the new state against the old and update the UI.
Permalink
Q13:

What is the purpose of useEffect?

Entry

Answer

useEffect runs side effects after rendering, such as API calls, subscriptions, timers, or DOM manipulation.
Quick Summary: useEffect lets you run side effects after a component renders — data fetching, subscriptions, DOM manipulation. It runs after the browser paints, keeping rendering fast. The dependency array controls when it re-runs. A cleanup function lets you cancel subscriptions or timers when the component unmounts.
Permalink
Q14:

What happens if you forget dependencies in useEffect?

Entry

Answer

The effect runs after every render, potentially causing infinite loops or unnecessary API requests.
Quick Summary: Without all dependencies listed, the effect captures stale values from its first render (a stale closure). The effect runs but uses old data — leading to bugs that are hard to trace. ESLint's exhaustive-deps rule catches this. In React 18+, running effects twice in Strict Mode also surfaces these issues.
Permalink
Q15:

What is controlled vs uncontrolled component in forms?

Entry

Answer

Controlled components store form values in React state. Uncontrolled components store input values in the DOM and use refs to access them.
Quick Summary: Controlled: form input value is driven by React state — React owns the value, every keystroke goes through state. Uncontrolled: the DOM owns the value, accessed via a ref. Controlled gives you full control and validation at every change. Uncontrolled is simpler but you lose the ability to sync or validate on every input.
Permalink
Q16:

What is React Strict Mode and why is it useful?

Entry

Answer

Strict Mode highlights potential issues by intentionally double-running certain logic in development to detect unsafe patterns.
Quick Summary: Strict Mode activates extra development-only checks: it renders components twice to catch side effects in the render phase, double-fires effects to detect missing cleanup, and warns about deprecated APIs. None of this affects production. It's a great way to catch subtle bugs early without any runtime cost.
Permalink
Q17:

What is Concurrent Rendering in React 18?

Entry

Answer

Concurrent Rendering allows React to pause, resume, interrupt, and prioritize UI rendering tasks for better responsiveness.
Quick Summary: Concurrent Rendering lets React interrupt, pause, and resume rendering work. Instead of blocking the main thread until a render completes, React can yield to higher-priority updates (like user input) mid-render. This makes apps feel more responsive — you can type in an input while React renders a heavy list in the background.
Permalink
Q18:

What is useId introduced in React 18?

Entry

Answer

useId generates unique, stable IDs used for accessibility attributes and prevents hydration mismatches in SSR.
Quick Summary: useId generates a stable, unique ID that's consistent between server and client renders — preventing hydration mismatches. Useful for accessibility attributes like aria-labelledby where you need to link elements by ID. Unlike random IDs or incrementing counters, useId works correctly with SSR and concurrent rendering.
Permalink
Q19:

What is the difference between useEffect and useLayoutEffect?

Entry

Answer

useEffect runs after the browser paints. useLayoutEffect runs before paint and is used for layout measurements.
Quick Summary: Both run after render, but at different times. useLayoutEffect fires synchronously after DOM mutations but before the browser paints — use it when you need to measure or adjust the DOM (like reading element size) before the user sees anything. useEffect fires after painting — use it for async operations and subscriptions.
Permalink
Q20:

What are React Server Components?

Entry

Answer

Server Components run on the server, fetch data directly, and send lightweight results to the client, reducing bundle size and improving performance.
Quick Summary: React Server Components render on the server and send HTML (or serialized component tree) to the client — zero client-side JavaScript for those components. They can access databases and file systems directly, keep sensitive logic server-side, and reduce the JavaScript bundle size. Client components handle interactivity.
Permalink

Curated Sets for React

No curated sets yet. Group questions into collections from the admin panel to feature them here.

People Also Ask - Related React Questions

What problem does React solve compared to directly manipulating the DOM?
What is JSX and why do we use it in React?
Why must React components start with a capital letter?
What is the purpose of the createRoot API introduced in React 18?
What is the difference between a Component and an Element in React?
What is the use of React Fragment?
Ready to level up? Start Practice