Core React Interview Questions Every Developer Should Know
Core React Concepts
Master the 6 essential React fundamentals every developer must know — clear explanations, real code examples, and interview tips.
Quick Navigation
What is React and how does it differ from other frameworks?
Library vs Framework · UI Layer · Ecosystem
Quick Answer
React is an open-source JavaScript library developed by Meta (Facebook) for building User Interfaces. It focuses only on the View layer — routing, state management, and API calls require separate libraries.
React vs Angular vs Vue
| Feature | ⚛️ React | Angular | Vue |
|---|---|---|---|
| Type | Library (UI only) | Full Framework | Progressive Framework |
| DOM | Virtual DOM | Real DOM | Virtual DOM |
| Language | JSX (JS + HTML) | TypeScript | HTML Template + JS |
| Learning Curve | Medium | High | Low |
| Created by | Meta | Evan You |
React's Core Strengths
Interview Tip
Always emphasize that React is a library, not a framework. Angular is "opinionated" (forces one way to do things) while React gives you full freedom to choose your own tools for routing, state, etc.
What is the Virtual DOM and how does it work?
Diffing · Reconciliation · Performance Optimization
Quick Answer
The Virtual DOM is a lightweight JavaScript representation of the real DOM kept in memory. When state changes, React updates the Virtual DOM first, compares it with the previous version (diffing), and applies only the minimal necessary changes to the actual DOM.
Step-by-Step Process
Initial Render
React creates a Virtual DOM tree — a complete JavaScript object representing the entire UI structure.
State / Props Change
When useState or setState is called, React creates a brand new Virtual DOM tree reflecting the updated state.
Diffing Algorithm
React compares the old and new Virtual DOM trees using its optimized diffing algorithm to detect what changed.
Reconciliation
Only the changed nodes are patched in the actual DOM — making updates extremely fast and efficient.
Visual Flow
Interview Tip: Mention Reconciliation and the Fiber architecture (React 16+). Fiber improved the diffing algorithm to be interruptible, enabling Concurrent Mode and Suspense.
What is JSX? Why do we use it?
JavaScript XML · Babel · Syntax Sugar
Quick Answer
JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup inside JS code. Babel transpiles it into React.createElement() calls under the hood.
With JSX — Clean ✓
// Clean and readable const el = ( <div className="card"> <h1>Hello, {name}!</h1> <p>Welcome</p> </div> );
Without JSX — Verbose
// Same output — messy! const el = React.createElement( 'div', { className: 'card' }, React.createElement( 'h1', null, 'Hello, ', name ), React.createElement( 'p', null, 'Welcome' ) );
Important JSX Rules
Use className instead of class (JS reserved word)
Use htmlFor instead of for in labels
Must return a single root element — use <>...</> Fragment to avoid extra DOM nodes
JavaScript expressions go inside {curly braces}
Self-closing tags must close: <img />, <br />
Interview Tip: JSX is not HTML — it compiles to React.createElement(). In React 17+, you no longer need to import React thanks to the new JSX transform.
What are Components? Functional vs Class Components?
Building Blocks · Hooks · Lifecycle · Modern React
Quick Answer
Components are the building blocks of any React app. Each component is an independent, reusable piece of UI with its own logic — like LEGO bricks, small, self-contained, and composable.
- ✓Plain JavaScript function
- ✓Uses Hooks (useState, useEffect)
- ✓Less code, more readable
- ✓Recommended in 2024+
- →Extends React.Component
- →Uses this.state & lifecycle
- →More verbose boilerplate
- →Found in older codebases
Functional Component (recommended)
// ✅ Modern Functional Component with Hook import { useState } from 'react'; function Counter({ title }) { const [count, setCount] = useState(0); return ( <div className="counter"> <h2>{title}</h2> <p>Count: {count}</p> <button onClick={() => setCount(c => c + 1)}>Increment</button> </div> ); } export default Counter;
Class Component (legacy)
// 🕰️ Class Component — older codebases import { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <h2>{this.props.title}</h2> <p>Count: {this.state.count}</p> </div> ); } }
Interview Tip: Say "In modern React, we use Functional Components exclusively with Hooks." Hooks solved all Class component use cases in a simpler, more composable way.
What is the difference between Props and State?
Parent-Child · Read-Only · Reactivity · Re-render
Props (Properties)
Data passed from parent to child. The component receives them but cannot modify them. Props are read-only.
State
Data managed inside the component itself. It can change over time. Every state change triggers a re-render.
// Parent component — passes PROPS down function App() { return <LikeButton label="Like this post" postId={42} />; } // Child component — receives PROPS, manages own STATE function LikeButton({ label, postId }) { // ← PROPS const [liked, setLiked] = useState(false); // ← STATE const [count, setCount] = useState(0); // ← STATE const handleLike = () => { setLiked(true); setCount(c => c + 1); }; return ( <button onClick={handleLike}> {liked ? '❤️' : '🤍'} {label} ({count}) </button> ); }
| Aspect | Props | State |
|---|---|---|
| Source | From parent component | Internal to component |
| Mutable? | No — Read-only | Yes — via setter |
| Re-render? | When parent re-renders | On every change |
| Declared with | <Comp value={...} /> | useState(initial) |
Interview Tip: Mention "single source of truth" and "lifting state up". If two sibling components need the same data, move the state up to their common parent and pass it down as props.
What is a Controlled vs Uncontrolled Component?
Forms · useRef · useState · Single Source of Truth
Controlled
Recommended ✓React controls the form data via state. Every keystroke updates state, and state drives the displayed value.
Uncontrolled
Special CasesThe DOM manages the data itself. React reads the value only when needed using useRef.
Controlled
function LoginForm() { const [email, setEmail] = useState(''); return ( <input type="email" value={email} onChange={e => setEmail(e.target.value) } /> ); // React = source of truth }
Uncontrolled
function FileUpload() { const fileRef = useRef(null); const submit = () => { console.log( fileRef.current .files[0] ); }; return ( <input type="file" ref={fileRef} /> ); // DOM = source of truth }
| Aspect | Controlled | Uncontrolled |
|---|---|---|
| Data lives in | React State | DOM itself |
| Access via | state variable | ref.current.value |
| Validation | Real-time | On submit only |
| Best for | Text inputs, selects | File upload, 3rd-party |
| Recommended? | Yes ✓ | Special cases only |
Interview Tip: Always default to Controlled components. Libraries like React Hook Form and Formik use uncontrolled refs internally for performance, but expose a controlled-like API to developers.
More In React js
Explore more React js articles
Read more articles from the same category or open the full category archive directly.
React js
React Hooks Complete Guide Explained with Examples
General Knowledge
Bharat Ratna Award Winners List 1954 to 2024: History, Facts and Full List
General Knowledge