8/20/25, 12:26 React Interview Questions PDF -

PM Claude

⚛ React Interview
Questions
50+ Essential Questions with Answers & Code Examples

Table of Contents (50+ Questions)

1.React Basics (8 Questions)
2.Components & Props (7 Questions)
3.State Management (6 Questions)
4.Lifecycle & Effects (6 Questions)
5.React Hooks (8 Questions)
6.Advanced Concepts (7 Questions)
7.Performance (6 Questions)
8.Routing & Forms (4 Questions)

1.React Basics (8 Questions)

1.What is React and why is it used? Easy

React is a JavaScript library for building user interfaces, developed by

Facebook.
It's used for creating interactive UIs efficiently through component-
based architecture, virtual DOM, and declarative programming.

2.What is JSX? Provide an example. Easy

JSX is a syntax extension for JavaScript that allows writing HTML-like

code within JavaScript. It gets compiled to React.createElement()
calls.

// JSX
const element = <h1>Hello, {name}!</h1>;

@Zeeshan

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 1/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
// Compiled JavaScript
const element = React.createElement('h1', null, 'Hello, ', name, '!');

3.What is Virtual DOM and how does it work? Medium

Virtual DOM is a lightweight JavaScript representation of the real

DOM. React creates a virtual copy, compares it with the previous
version (diffing), and
updates only the changed parts (reconciliation) for better performance.

4.What are the main features of React? Easy

Component-based
architecture Virtual DOM for
performance JSX syntax
One-way data binding
Reusable components
Strong ecosystem and community

5.What is the difference between React and ReactDOM? Medium

React contains the core functionality for creating components and
managing state. ReactDOM provides DOM-specific methods for
rendering React
components to the browser.

import React from 'react';

import ReactDOM from 'react-dom';

// React creates components

const App = () => <h1>Hello World</h1>;

// ReactDOM renders to DOM

ReactDOM.render(<App />, document.getElementById('root'));

6.What is Babel and why is it needed in React? Easy

Babel is a JavaScript compiler that transforms JSX and ES6+ code

into browser- compatible JavaScript. It's needed because browsers
don't natively understand JSX syntax.

7.What are React Elements vs Components? Medium

Elements are plain objects describing what should appear on screen.

Components are functions or classes that return elements.

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 2/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
// Element
const element = <h1>Hello</h1>;

// Component
function Welcome() {
return <h1>Hello</h1>;
}

8.What is Create React App? Easy

Create React App is an officially supported way to create single-page React

applications. It provides a modern build setup with no configuration needed.

npx create-react-app my-app

cd my-app
npm start

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 3/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude

2.Components & Props (7 Questions)

9.What are React Components? Write functional

and class component examples. Easy

Components are reusable pieces of UI that return JSX.

// Functional Component
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}

// Class Component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

10. What are Props?

How do you pass and use them? Easy

Props are read-only properties passed from parent to child components.

// Parent component
function App() {
return <UserCard name="John" age={25} />;
}

// Child component
function UserCard(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
</div>
);
}

11. What is Props Destructuring? Easy

Props destructuring extracts properties from the props object for cleaner code.

// Without destructuring
function UserCard(props) {
return <h1>{props.name}</h1>;
}

// With destructuring
function UserCard({ name, age })
{ return (
<div>
<h1>{name}</h1>

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 4/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
<p>Age: {age}</p>
</div>
);
}

12. What are Default Props? Medium

Default props provide fallback values when props are not passed.

// Functional component
function Button({ text = "Click me", type = "button" })
{ return <button type={type}>{text}</button>;
}

// Class component
class Button extends React.Component
{ static defaultProps = {
text: "Click me",
type: "button"
};

render() {
return <button type={this.props.type}>{this.props.text}</button>;
}
}

13. What is Props Drilling

and how to solve it? Medium

Props drilling is passing data through multiple component layers.

Solutions include Context API, Redux, or component composition.

// Props drilling problem

function App() {
const user = { name: "John" };
return <Header user={user} />;
}

function Header({ user })

{ return <Navbar user={user}
/>;
}

function Navbar({ user }) {

return <UserProfile user={user} />;
}

// Solution with Context

const UserContext = React.createContext();

function App() {
const user = { name: "John" };
return (
<UserContext.Provider value={user}>
<Header />
</UserContext.Provider>
);
}

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 5/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude

14. What is the 'children' prop? Easy

The children prop contains the content between component tags.

function Card({ children })

{ return (
<div className="card">
{children}
</div>
);
}

// Usage
<Card>
<h2>Title</h2>
<p>Content here</p>
</Card>

15. How do you validate props in

React? Medium

Use PropTypes library for runtime type checking.

import PropTypes from 'prop-types';

function UserCard({ name, age, email }) {

return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Email: {email}</p>
</div>
);
}

UserCard.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
email: PropTypes.string
};

3.State Management (6 Questions)

16. What is State in React? Easy

State is a built-in object that stores component-specific data. When

state changes, React re-renders the component.

// Class component state

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 6/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
render() {
return <h1>Count: {this.state.count}</h1>;
}
}

// Functional component state

function Counter() {
const [count, setCount] = useState(0);
return <h1>Count: {count}</h1>;
}

17. Difference between State and

Props? Easy

State: Mutable, owned by component, triggers re-renders

Props: Immutable, passed from parent, read-only

// State - can change

const [name, setName] = useState("John");
setName("Jane"); // ✓ Allowed

// Props - cannot change

function Welcome({ name }) {
// name = "Jane"; // ✗ Not allowed
return <h1>Hello, {name}</h1>;
}

18. How do you update state

correctly? Medium

Never mutate state directly. Use setState() or state setters.

// ✗ Wrong - Direct mutation

this.state.count = 1;

// ✓ Correct - Using setState

this.setState({ count: this.state.count + 1 });

// ✓ Correct - Functional update

this.setState(prevState => ({ count: prevState.count + 1 }));

// ✓ Correct - With hooks

const [count, setCount] = useState(0);
setCount(count + 1);
setCount(prev => prev + 1);

19. What is Lifting State Up?

Provide example. Medium

Moving state from child to common parent component to share

between siblings.

function App() {
https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 7/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM const [temperature, setTemperature]
Claude = useState(0);

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 8/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
return (
<div>
<TemperatureInput
value={temperature}
onChange={setTemperature}
/>
<BoilingVerdict celsius={temperature} />
</div>
);
}

function TemperatureInput({ value, onChange })

{ return (
<input
value={value}
onChange={e => onChange(Number(e.target.value))}
/>
);
}

20. What is setState()

asynchronous behavior? Hard

setState() is asynchronous for performance. React batches multiple setState

calls.

// This might not work as expected

this.setState({ count: this.state.count + 1 });
console.log(this.state.count); // May show old value

// Use callback or functional update

this.setState({ count: this.state.count + 1 }, () =>
{ console.log(this.state.count); // Shows updated value
});

// Better approach
this.setState(prevState => ({
count: prevState.count + 1
}));

21. How to update array and

object state? Medium

Create new arrays/objects instead of mutating existing ones.

// Array state
const [items, setItems] = useState(['apple', 'banana']);

// Add item
setItems([...items, 'orange']);

// Remove item
setItems(items.filter(item => item !== 'apple'));

// Object state
const [user, setUser] = useState({ name: 'John', age: 25 });

// Update property
setUser({ ...user, age: 26 });
setUser(prev => ({ ...prev, age: prev.age + 1 }));
https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 9/14
573556b1ffab
8/20/25, 12:26 React Interview Questions PDF -
PM Claude

4.Lifecycle & Effects (6 Questions)

22. What are React Lifecycle

Methods? Medium

Lifecycle methods are called at specific phases of a component's existence:

class MyComponent extends React.Component {

// Mounting
componentDidMount() {
console.log('Component mounted');
}

// Updating
componentDidUpdate(prevProps, prevState)
{ console.log('Component updated');
}

// Unmounting
componentWillUnmount() {
console.log('Component will unmount');
}

render() {
return <div>Hello</div>;
}
}

23. What is useEffect? Provide

examples. Medium

useEffect performs side effects in functional components.

// Effect without dependencies (runs every render)

useEffect(() => {
console.log('Component rendered');
});

// Effect with empty dependencies (runs once)

useEffect(() => {
console.log('Component mounted');
}, []);

// Effect with dependencies

useEffect(() => {
console.log('Count changed:', count);
}, [count]);

// Effect with cleanup

useEffect(() => {
const timer = setInterval(() => console.log('tick'), 1000);
return () => clearInterval(timer);
}, []);

24. How to fetch data in React?Medium

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 10/
573556b1ffab 14
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
Use useEffect for data fetching in functional components.

function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
async function fetchUsers()
{ try {
const response = await fetch('/api/users'); const
userData = await response.json();
setUsers(userData);
} catch (error)
{ console.error('Error:',
error);
} finally {
setLoading(false);
}
}

fetchUsers();
}, []);

if (loading) return <div>Loading...</div>; return (

<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}

25. What is cleanup in useEffect? Medium

Cleanup prevents memory leaks by canceling subscriptions, timers, or requests.

useEffect(() => {
// Subscribe
const subscription = API.subscribe(handleData); const
timer = setInterval(fetchData, 1000);

// Cleanup function return

() => {
subscription.unsubscribe();
clearInterval(timer);
};
}, []);

// Cleanup with abort controller

useEffect(() => {
const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })

.then(response => response.json())
.then(setData);

return () => controller.abort();

}, []);

26. What is the dependency

array in useEffect? Medium

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 11/
573556b1ffab 14
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
The dependency array controls when the effect runs.

// No dependency array - runs every render

useEffect(() => {
console.log('Every render');
});

// Empty array - runs once useEffect(()

=> {
console.log('Once on mount');
}, []);

// With dependencies - runs when dependencies change useEffect(()

=> {
console.log('Name or age changed');
}, [name, age]);

// Multiple effects for different concerns

useEffect(() => {
document.title = `User: ${name}`;
}, [name]);

useEffect(() =>
{ localStorage.setItem('theme',
theme);
}, [theme]);

27. componentDidMount
vs useEffect comparison? Medium

Both handle component mounting, but useEffect is more flexible.

// Class component
class UserProfile extends React.Component
{ componentDidMount() {
this.fetchUser();
}

componentWillUnmount() {
this.cleanup();
}

fetchUser() { /* API call */ }

cleanup() { /* cleanup */ }
}

// Functional component equivalent

function UserProfile() {
useEffect(() => {
fetchUser();
return cleanup; // Cleanup on unmount
}, []); // Empty deps = componentDidMount + componentWillUnmount

const fetchUser = () => { /* API call */ }; const

cleanup = () => { /* cleanup */ };
}

5.React Hooks (8 Questions)

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 12/
573556b1ffab 14
8/20/25, 12:26 React Interview Questions PDF -
PM Claude

28. What are React Hooks? Easy

Hooks are functions that let you use state and lifecycle features in
functional components. They start with "use".

import { useState, useEffect, useContext } from 'react';

function MyComponent() {
const [count, setCount] = useState(0); // State hook

useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // Effect hook

return <button onClick={() => setCount(count + 1)}>{count}</button>;

}

29. What are the Rules of Hooks? Medium

1.Only call hooks at the top level (not inside loops, conditions,
or nested functions)
2.Only call hooks from React function components or custom hooks

// ✗ Wrong
function BadComponent()
{ if (someCondition) {
const [state, setState] = useState(0); // Don't do this!
}

for (let i = 0; i < 3; i++)

{ useEffect(() => {}); // Don't do
this!
}
}

// ✓ Correct
function GoodComponent() {
const [state, setState] = useState(0);
const [name, setName] = useState('');

useEffect(() => {
// Effect logic here
}, [state]);
}

30. What is useState? Provide

examples. Easy

useState adds state to functional components.

// Basic usage
const [count, setCount] = useState(0);

// With object
const [user, setUser] = useState({ name: '', email: '' });

// With function (lazy initial state)

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 13/
573556b1ffab 14
8/20/25, 12:26 React Interview Questions PDF -
PM Claude
const [expensiveValue, setExpensiveValue] = useState(() =>
{ return computeExpensiveValue();
});

// Multiple state variables

function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);

return (
<form>
<input
value={email}
onChange={e => setEmail(e.target.value)}
/>
<input
type="password"

https://claude.ai/chat/73c511ed-1b35-4f79-ac5f- 14/
573556b1ffab 14