Landing your dream React job requires solid preparation. As someone who's been through multiple interviews and conducted many myself, I've compiled the most essential React questions that frequently appear in technical interviews.
These questions cover fundamental concepts, hooks, performance optimization, and best practices that every React developer should understand deeply, not just memorize.
Fundamental React Concepts
What are components in React?
Answer:
Components are independent, reusable pieces of UI written in JSX. They are the building blocks of any React application, allowing you to split the UI into independent, reusable pieces that can be thought of as JavaScript functions that return JSX.
// Functional Component
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Class Component (legacy)
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}What is JSX and why do we use it?
Answer:
JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes React components more readable and provides better developer experience with syntax highlighting and error checking.
// JSX
const element = <h1>Hello, world!</h1>;
// Compiled JavaScript
const element = React.createElement('h1', null, 'Hello, world!');
// JSX with expressions
const name = 'Pedro';
const element = <h1>Hello, {name}!</h1>;What's the difference between state and props?
Answer:
Props are read-only data passed from parent to child components, while state is mutable data managed locally within a component. Props enable component communication, state enables component reactivity.
// Props (immutable, passed from parent)
function Child({ message, count }) {
return <div>{message}: {count}</div>;
}
// State (mutable, managed locally)
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<Child message="Count" count={count} />
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}Can you modify props inside a component?
Answer:
No, props are immutable and read-only. React enforces this to maintain predictable data flow (unidirectional data flow). Only the parent component can modify the data that becomes props for the child component.
// Wrong - Never modify props directly
function BadComponent({ user }) {
user.name = 'Modified'; // This breaks React's principles
return <div>{user.name}</div>;
}
// Correct - Create new objects/arrays
function GoodComponent({ user, onUserUpdate }) {
const handleUpdate = () => {
onUserUpdate({ ...user, name: 'Updated' });
};
return (
<div>
{user.name}
<button onClick={handleUpdate}>Update</button>
</div>
);
}React Hooks
What does useEffect do and when would you use it?
Answer:
useEffect is a React hook that handles side effects in functional components. It runs after the component renders and can be used for data fetching, subscriptions, timers, or manually updating the DOM. It replaces componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
// Data fetching
useEffect(() => {
fetchUserData(userId).then(setUser);
}, [userId]); // Runs when userId changes
// Cleanup (subscriptions, timers)
useEffect(() => {
const subscription = subscribe();
return () => subscription.unsubscribe();
}, []);
// Run once on mount
useEffect(() => {
console.log('Component mounted');
}, []); // Empty dependency arrayWhat's the difference between useMemo and useCallback?
Answer:
useMemo memoizes the result of expensive calculations, while useCallback memoizes function references. useMemo returns a value, useCallback returns a function. Both help prevent unnecessary re-computations and re-renders.
// useMemo - memoizes values
const expensiveValue = useMemo(() => {
return heavyCalculation(data);
}, [data]);
// useCallback - memoizes functions
const handleClick = useCallback((id) => {
onItemClick(id);
}, [onItemClick]);
// Without memoization, this recreates on every render
const handleClick = (id) => onItemClick(id); // New function reference each timePerformance & Optimization
How do you prevent unnecessary re-renders in React?
Answer:
Use React.memo for component-level memoization, useCallback for function references, useMemo for expensive calculations, and proper key props for lists. Understanding when and why components re-render is crucial for optimization.
// React.memo prevents re-renders when props haven't changed
const ExpensiveComponent = React.memo(({ data, onClick }) => {
return <div onClick={onClick}>{data.name}</div>;
});
// useCallback prevents function recreation
const Parent = () => {
const [count, setCount] = useState(0);
// Without useCallback, ExpensiveComponent re-renders every time
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);
return <ExpensiveComponent data={data} onClick={handleClick} />;
};Advanced Concepts
What is the Event Loop in JavaScript and how does it affect React?
Answer:
The Event Loop is JavaScript's mechanism for handling asynchronous operations. It manages the call stack and task queue, ensuring non-blocking execution. In React, this affects how state updates are batched and when effects run.
// Event Loop phases affect React updates
console.log('1'); // Synchronous - runs first
setTimeout(() => {
console.log('2'); // Macro task - runs after micro tasks
}, 0);
Promise.resolve().then(() => {
console.log('3'); // Micro task - runs before macro tasks
});
console.log('4'); // Synchronous - runs second
// Output: 1, 4, 3, 2Quick Reference Table
| Concept | Purpose | Key Points |
|---|---|---|
| useState | Manage local component state | Returns [value, setter], triggers re-render |
| useEffect | Handle side effects | Runs after render, cleanup function, dependencies |
| useMemo | Memoize expensive calculations | Returns value, dependency array, performance optimization |
| useCallback | Memoize function references | Returns function, prevents re-creation, child optimization |
| React.memo | Prevent component re-renders | HOC, shallow prop comparison, performance boost |
Interview Tips
Pro Tip: Don't just memorize answers! Understand the underlying concepts and be prepared to explain why these patterns exist and when to use them. Interviewers appreciate candidates who understand the trade-offs and real-world applications.
Common Follow-up Questions:
- "How would you handle this in a large application?"
- "What are the performance implications?"
- "How would you test this?"
- "What alternatives exist and why choose this approach?"
Conclusion
These questions form the foundation of React knowledge expected in most interviews. Focus on understanding the concepts deeply rather than memorizing answers. Practice explaining these concepts in your own words and be prepared with real-world examples from your experience.
Remember: Great developers don't just know the syntax—they understand the principles behind the tools they use.