Basic React Interview Questions (For Freshers)
1. What is React and how does it work?
React is a JavaScript library for building user interfaces by creating reusable components. It works using a **Virtual DOM** that tracks changes and updates only the modified parts of the real DOM through a process called reconciliation[2][3].
2. What is JSX and how is it converted to JavaScript?
JSX is a syntax extension that allows writing HTML-like code inside JavaScript. It gets transpiled by Babel into React.createElement() calls that create React elements[2][3].
3. What is the difference between functional and class components?
Functional components are simpler functions returning JSX, while class components extend React.Component and use lifecycle methods. Functional components use hooks for state, while class components use this.state and this.setState[2].
4. What is the Virtual DOM in React?
The Virtual DOM is a lightweight JavaScript object representation of the real DOM. React creates a new Virtual DOM tree on each state change, compares it with the previous one (diffing), and updates only changed nodes in the real DOM[2][3].
5. What are props in React?
Props are read-only data passed from parent to child components. They make components reusable by providing different data each time the component renders[2].
6. What is state in React?
State is a mutable object that holds data that can change over time within a component. Changes to state trigger re-renders of the component[2].
7. How do you create a simple counter component?
A counter component uses useState hook to manage count value and updates it on button clicks:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
};8. What is the purpose of keys in React lists?
Keys help React identify which items have changed, been added, or removed. They should be unique strings that don’t change to optimize re-rendering performance[2].
9. What are React lifecycle methods?
Lifecycle methods are special methods in class components that run at specific points: mounting (componentDidMount), updating (componentDidUpdate), and unmounting (componentWillUnmount)[4].
Intermediate React Interview Questions (1-3 Years Experience)
10. What is useState hook and how does it work?
useState is a React hook that adds state to functional components. It returns an array with current state value and a setter function[2].
11. Explain useEffect hook with an example.
useEffect handles side effects like data fetching or subscriptions. It runs after render and can be controlled with dependency arrays:
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(setData);
}, []); // Empty array runs once
return <ul>{data.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
};12. How do you implement a toggle switch component?
A toggle switch uses useState to manage boolean state and conditionally renders content:
const ToggleSwitch = () => {
const [isOn, setIsOn] = useState(false);
return (
<div>
<button onClick={() => setIsOn(!isOn)}>
{isOn ? 'ON' : 'OFF'}
</button>
{isOn && <p>Switch is ON!</p>}
</div>
);
};13. What is conditional rendering in React?
Conditional rendering displays elements based on conditions using logical operators (&&, ||, ternary) or if-else statements before return[2].
14. How do you create a simple todo list in React?
A todo list manages an array state and provides add/delete functionality:
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
setTodos([...todos, input]);
setInput('');
};
return (
<div>
<input value={input} onChange={e => setInput(e.target.value)} />
<button onClick={addTodo}>Add</button>
<ul>{todos.map((todo, index) => <li key={index}>{todo}</li>)}</ul>
</div>
);
};15. What are React fragments?
Fragments (<></> or <React.Fragment>) allow grouping multiple elements without adding extra DOM nodes[2].
16. How do you fetch data from API in React?
Use useEffect with fetch or axios inside it, managing loading and error states:
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
let mounted = true;
fetch('/api/data')
.then(res => res.json())
.then(data => {
if (mounted) {
setData(data);
setLoading(false);
}
});
return () => { mounted = false; };
}, []);17. What is the Context API in React?
Context API provides a way to pass data through the component tree without prop drilling. Create context with React.createContext(), use Provider and useContext hook[2].
18. How do you implement a search bar with filtering?
Use useState for search term and filter data array based on input value:
const [search, setSearch] = useState('');
const filtered = items.filter(item =>
item.name.toLowerCase().includes(search.toLowerCase())
);Advanced React Interview Questions (3-6 Years Experience)
19. What is useReducer hook and when to use it?
useReducer is used for complex state logic with multiple sub-values or when next state depends on previous state. It’s similar to Redux[2][4].
20. Explain useCallback and useMemo hooks.
useCallback memoizes functions to prevent unnecessary re-renders of child components. useMemo memoizes expensive calculations[2].
21. What is React.memo and when to use it?
React.memo is a higher-order component that memoizes functional components, preventing re-renders when props haven’t changed[2].
22. How do you implement custom hooks?
Custom hooks are functions starting with “use” that use other hooks. Example – useFetch:
const useFetch = (url) => {
const [data, setData] = useState([]);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
};23. What is StrictMode in React?
StrictMode is a development tool that highlights potential problems by running certain functions twice and warning about unsafe lifecycles[4].
24. How do you optimize performance in React lists?
Use proper keys, React.memo, virtualized lists (react-window), and avoid inline functions in render. Split large lists and use useCallback for handlers[2].
25. Scenario: At Paytm, how would you implement a multi-step form?
Use useState for current step and form data, conditionally render steps:
const [step, setStep] = useState(1);
const [formData, setFormData] = useState({});
const nextStep = () => setStep(step + 1);
const prevStep = () => setStep(step - 1);
{step === 1 && <Step1 next={nextStep} />}
{step === 2 && <Step2 next={nextStep} prev={prevStep} />}26. How do you handle real-time search with debouncing?
Implement debouncing using useEffect and setTimeout to limit API calls during typing:
const [searchTerm, setSearchTerm] = useState('');
const [results, setResults] = useState([]);
useEffect(() => {
const timer = setTimeout(() => {
// API call
}, 300);
return () => clearTimeout(timer);
}, [searchTerm]);27. What are error boundaries in React?
Error boundaries are class components that catch JavaScript errors in child component trees using static getDerivedStateFromError and componentDidCatch[2].
28. Scenario: At Zoho, how would you create a reusable modal component?
Create a modal with isOpen prop, overlay, and proper focus management:
const Modal = ({ isOpen, onClose, children }) => {
if (!isOpen) return null;
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal" onClick={e => e.stopPropagation()}>
<button onClick={onClose}>Close</button>
{children}
</div>
</div>
);
};29. How do you implement code splitting in React?
Use React.lazy() and Suspense for dynamic imports: const LazyComponent = React.lazy(() => import(‘./Component’)); with <Suspense fallback={<Loading />}>[2].
30. Scenario: At Atlassian, how would you manage global state without external libraries?
Use Context API with useReducer for complex global state:
const AppContext = createContext();
const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE_USER':
return { ...state, user: action.payload };
default:
return state;
}
};
const AppProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
</AppContext.Provider>
);
};