React technical interviews evaluate understanding of fundamental concepts, advanced patterns, and best practices. This guide presents the 30 most frequently asked questions, with detailed answers and code examples for effective preparation. These questions are organized by difficulty level. Mastering the fundamentals before tackling advanced concepts allows for more structured preparation. ## React Fundamentals ### 1. What is the Virtual DOM and why does React use it? The Virtual DOM is a lightweight JavaScript representation of the real DOM. React uses this abstraction to optimize interface updates. The process works in three steps: React first creates a virtual copy of the DOM, then compares this copy with the previous version when changes occur (diffing algorithm), and finally applies only the necessary modifications to the real DOM (reconciliation). ```jsx // Simplified example of the concept // When state changes, React doesn't recreate the entire DOM function Counter() { const [count, setCount] = useState(0) // Only the span containing count will be updated in the real DOM // The rest of the component is untouched return (

Counter

{count}

) } ``` This approach avoids costly DOM operations and enables performant updates even for complex interfaces. ### 2. What is the difference between functional and class components? Functional components are JavaScript functions that receive props and return JSX. Since React 16.8, hooks allow using state and lifecycle in functional components. ```jsx // Functional component (recommended) // More concise, easier to test, supports hooks function Welcome({ name }) { const [visits, setVisits] = useState(0) useEffect(() => { setVisits(v => v + 1) }, []) return

Hello {name}, visit #{visits}

} // Class component (legacy) // More verbose, requires this binding class WelcomeClass extends React.Component { state = { visits: 0 } componentDidMount() { this.setState(prev => ({ visits: prev.visits + 1 })) } render() { return

Hello {this.props.name}, visit #{this.state.visits}

} } ``` Functional components are now the standard. Class components remain supported but are no longer recommended for new projects. ### 3. How does JSX work? JSX is a syntax extension for JavaScript that allows writing markup in code. It's not HTML but JavaScript in disguise. ```jsx // What we write (JSX) const element = (

Title

Paragraph

) // What Babel compiles (pure JavaScript) const element = React.createElement( 'div', { className: 'container' }, React.createElement('h1', null, 'Title'), React.createElement('p', null, 'Paragraph') ) ``` Differences from HTML include: `className` instead of `class`, `htmlFor` instead of `for`, camelCase for attributes (`onClick`, `tabIndex`), and mandatory closing of self-closing tags. ### 4. What is state vs props? Props are data passed from a parent component to a child. They are read-only. State is a component's internal state, modifiable via setters. ```jsx // UserCard.jsx // name and role are props (immutable) function UserCard({ name, role }) { // isExpanded is state (mutable) const [isExpanded, setIsExpanded] = useState(false) return (

{name}

{role}

{/* Modifying state triggers a re-render */} {isExpanded && }

) } // Usage ``` The fundamental rule: props flow down (parent → child), state is local to each component. ### 5. Why are keys important in lists? Keys help React identify which elements have changed, been added, or removed in a list. Without unique and stable keys, React can have unexpected behaviors. ```jsx // ❌ Bad practice: index as key // Problem: if order changes, React loses tracking {items.map((item, index) => ( ))} // ✅ Good practice: unique and stable identifier {items.map(item => ( ))} // Concrete example of the problem with indices function TodoList() { const [todos, setTodos] = useState([ { id: 1, text: 'Learn React' }, { id: 2, text: 'Create a project' } ]) // When deleting the first element with key={index} // React will think element 0's content changed // instead of understanding an element was removed return (

{todo.text}

) } ``` ## React Hooks ### 6. Explain useState and its common pitfalls `useState` manages local state in a functional component. The setter can take a value or an update function. ```jsx // Declaration with initial value const [count, setCount] = useState(0) // ❌ Pitfall: multiple updates in the same cycle function increment() { setCount(count + 1) // count = 0, sets 1 setCount(count + 1) // count = 0 still, sets 1 setCount(count + 1) // count = 0 still, sets 1 // Final result: 1 (not 3) } // ✅ Solution: use the update function function incrementCorrect() { setCount(prev => prev + 1) // 0 → 1 setCount(prev => prev + 1) // 1 → 2 setCount(prev => prev + 1) // 2 → 3 // Final result: 3 } // ❌ Pitfall: object mutation const [user, setUser] = useState({ name: 'Alice', age: 25 }) user.age = 26 // Direct mutation, no re-render // ✅ Solution: create a new object setUser({ ...user, age: 26 }) // or setUser(prev => ({ ...prev, age: 26 })) ``` ### 7. How does useEffect work with its dependency array? `useEffect` executes side effects after render. The dependency array controls when the effect runs. ```jsx // Executed on every render (rare, usually avoid) useEffect(() => { console.log('Render completed') }) // Executed only on mount (equivalent to componentDidMount) useEffect(() => { console.log('Component mounted') // Cleanup on unmount (equivalent to componentWillUnmount) return () => { console.log('Component unmounted') } }, []) // Executed when userId changes useEffect(() => { async function fetchUser() { const response = await fetch(`/api/users/${userId}`) const data = await response.json() setUser(data) } fetchUser() }, [userId]) // ❌ Missing dependency - subtle bug useEffect(() => { const timer = setInterval(() => { setCount(count + 1) // count is "captured" at its initial value }, 1000) return () => clearInterval(timer) }, []) // count is missing from dependencies // ✅ Fix with update function useEffect(() => { const timer = setInterval(() => { setCount(prev => prev + 1) // No need for count in deps }, 1000) return () => clearInterval(timer) }, []) ``` Always enable `eslint-plugin-react-hooks` to detect missing dependencies. This rule prevents many hard-to-diagnose bugs. ### 8. When to use useMemo and useCallback? These hooks enable memoization to avoid unnecessary recalculations or re-creations. Be careful not to overuse them. ```jsx // useMemo: memoizes a computed value function ProductList({ products, filter }) { // Recalculated only if products or filter change const filteredProducts = useMemo(() => { console.log('Filtering...') return products.filter(p => p.category === filter) }, [products, filter]) return

{p.name}

} // useCallback: memoizes a function function ParentComponent() { const [count, setCount] = useState(0) // Without useCallback, handleClick is recreated on every render // Causing unnecessary re-renders of ExpensiveChild const handleClick = useCallback((id) => { console.log('Clicked:', id) }, []) // Empty deps = stable function return ( <> {count} {/* React.memo on ExpensiveChild for this to be effective */} ) } // ❌ Over-optimization: not needed here const SimpleComponent = () => { // This calculation is trivial, useMemo adds overhead const doubled = useMemo(() => 2 * 2, []) return {doubled} } ``` Use these hooks only when a performance problem is identified or to stabilize references passed to memoized components. ### 9. How does useRef work and what are its use cases? `useRef` creates a mutable reference that persists between renders without triggering a re-render when it changes. ```jsx // Case 1: Access a DOM element function TextInput() { const inputRef = useRef(null) const focusInput = () => { inputRef.current.focus() } return ( <> ) } // Case 2: Store a mutable value without re-render function Timer() { const [seconds, setSeconds] = useState(0) const intervalRef = useRef(null) const start = () => { // Store the interval ID to be able to stop it intervalRef.current = setInterval(() => { setSeconds(s => s + 1) }, 1000) } const stop = () => { clearInterval(intervalRef.current) } return (

{seconds}s

) } // Case 3: Keep the previous value function usePrevious(value) { const ref = useRef() useEffect(() => { ref.current = value }, [value]) return ref.current } ``` ### 10. Explain useContext and when to use it `useContext` accesses a React context without prop drilling. Ideal for global data like theme or logged-in user. ```jsx // 1. Create the context const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }) // 2. Create the provider function ThemeProvider({ children }) { const [theme, setTheme] = useState('light') const toggleTheme = useCallback(() => { setTheme(prev => prev === 'light' ? 'dark' : 'light') }, []) // Memoize the value to avoid unnecessary re-renders const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]) return ( {children} ) } // 3. Use the context function ThemedButton() { const { theme, toggleTheme } = useContext(ThemeContext) return ( ) } // 4. Wrap the application function App() { return (

Counter

Hello {name}, visit #{visits}

Hello {this.props.name}, visit #{this.state.visits}

Title

{name}

{user.name}

Recent Products