# React Performance Optimization (React / Next.js)

> React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler

- 22 interview questions
- Senior
- [Interview Questions: React / Next.js](https://sharpskill.dev/en/technologies/react-next/interview-questions.md)

## 1. 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.

## 2. 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.

## 3. 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.

## 19 more questions available

- 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?

Sign up for free: https://sharpskill.dev/en/login

## Other React / Next.js interview topics

- [JavaScript Essentials](https://sharpskill.dev/en/technologies/react-next/interview-questions/javascript-essentials.md): 25 questions, Junior
- [React Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-fundamentals.md): 20 questions, Junior
- [React Hooks](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-hooks.md): 22 questions, Junior
- [Component Lifecycle](https://sharpskill.dev/en/technologies/react-next/interview-questions/component-lifecycle.md): 18 questions, Junior
- [React Router](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-router.md): 20 questions, Junior
- [State Management with Context](https://sharpskill.dev/en/technologies/react-next/interview-questions/state-management-context.md): 18 questions, Junior
- [Forms & Controlled Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/forms-controlled-components.md): 20 questions, Mid-Level
- [Data Fetching & API](https://sharpskill.dev/en/technologies/react-next/interview-questions/fetching-data-api.md): 20 questions, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-query-tanstack.md): 20 questions, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/en/technologies/react-next/interview-questions/styling-css-in-js.md): 18 questions, Mid-Level
- [Next.js Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 questions, Mid-Level
- [TypeScript with React](https://sharpskill.dev/en/technologies/react-next/interview-questions/typescript-react.md): 20 questions, Mid-Level
- [Next.js Data Fetching](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 questions, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 questions, Mid-Level
- [Next.js Routing & Navigation](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 questions, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 questions, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 questions, Mid-Level
- [Next.js Middleware & Auth](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 questions, Mid-Level
- [React Testing](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-testing.md): 20 questions, Mid-Level
- [Zustand State Management](https://sharpskill.dev/en/technologies/react-next/interview-questions/zustand-state-management.md): 18 questions, Mid-Level
- [Error Boundaries & Error Handling](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-error-boundaries.md): 18 questions, Senior
- [Advanced React Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 questions, Senior
- [Next.js Advanced Features](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 questions, Senior
- [Next.js Deployment & Production](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 questions, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 questions, Senior
- [React Server Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-server-components.md): 26 questions, Senior
- [Next.js Internationalization](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 questions, Senior
- [React Security & Best Practices](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-security-best-practices.md): 22 questions, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/en/technologies/react-next/interview-questions/react-performance-optimization