Performance Optimization and Code Splitting
Optimize React load times. Learn lazy loading, Suspense boundaries, memoization, useMemo, useCallback, and virtual listing.
Downloaded from PrepIQ (https://prepiq.online)
Q1. What are performance optimization techniques in React?
Use React.memo, useMemo, useCallback, code splitting, lazy loading, virtualization.
Q2. How do you implement code splitting?
import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
</Routes>
</Suspense>
);
}Q3. What is virtual scrolling and when to use it?
Virtual scrolling - render only visible items in long lists. Use libraries like react-window.
Q4. How do you profile React performance?
Use React DevTools Profiler, Chrome DevTools, Lighthouse, Web Vitals.
Q5. What is memoization and how does useMemo work?
const memoized = useMemo(() => {
return expensiveCalculation(data);
}, [data]);Q6. How do you optimize images in React apps?
Use next/image, lazy loading, WebP format, responsive images, CDN.
Q7. What is React.lazy and why use it?
const Component = React.lazy(() => import('./Component'));
// Benefit: Automatic code splitting and lazy loadingQ8. How do you monitor bundle size?
Use webpack-bundle-analyzer, source-map-explorer, bundlesize, Lighthouse.
Performance Optimization and Code Splitting
Optimize React load times. Learn lazy loading, Suspense boundaries, memoization, useMemo, useCallback, and virtual listing.
What are performance optimization techniques in React?
Use React.memo, useMemo, useCallback, code splitting, lazy loading, virtualization.
How do you implement code splitting?
import { lazy, Suspense } from 'react'; const Home = lazy(() => import('./pages/Home')); const About = lazy((...
What is virtual scrolling and when to use it?
Virtual scrolling - render only visible items in long lists. Use libraries like react-window.
How do you profile React performance?
Use React DevTools Profiler, Chrome DevTools, Lighthouse, Web Vitals.
What is memoization and how does useMemo work?
const memoized = useMemo(() => { return expensiveCalculation(data); }, [data]);
How do you optimize images in React apps?
Use next/image, lazy loading, WebP format, responsive images, CDN.
What is React.lazy and why use it?
const Component = React.lazy(() => import('./Component')); // Benefit: Automatic code splitting and lazy load...
How do you monitor bundle size?
Use webpack-bundle-analyzer, source-map-explorer, bundlesize, Lighthouse.