React Performance Optimization
React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler
1What is the primary role of React.memo?
What is the primary role of React.memo?
Answer
React.memo is a Higher-Order Component that memoizes a component's render output. It performs a shallow comparison of props and skips re-rendering if props haven't changed. Particularly useful for optimizing expensive child components that frequently receive the same props.
2What is the main difference between useMemo and useCallback?
What is the main difference between useMemo and useCallback?
Answer
useMemo memoizes the result of a function (the returned value), while useCallback memoizes the function itself. useMemo is used to optimize expensive computations, whereas useCallback is used to stabilize function references passed as props, preventing unnecessary re-renders of memoized child components.
3In which case can using React.memo be counterproductive?
In which case can using React.memo be counterproductive?
Answer
React.memo can be counterproductive on components that receive different props on every render, because the cost of shallow prop comparison is added without benefit (the component will re-render anyway). It's better to reserve React.memo for components that often receive the same props and have expensive renders.
Why use useCallback for a function passed as prop to a component memoized with React.memo?
What is the main advantage of code splitting with React.lazy?
+19 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free