{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"React Performance Optimization"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Comprehensive guide to optimizing React applications for better performance, user experience, and scalability:"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"React.memo() - Preventing Unnecessary Re-renders;"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React.memo() is a higher-order component that memoizes the result of a component. It only re-renders if its props have changed, helping to prevent unnecessary re-renders."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// Basic memo usage\nconst ExpensiveComponent = React.memo(({ data, onUpdate }) => {\n console.log('Rendering expensive component');\n return (\n

{data.title}

{data.description}

\n \n

\n );\n});\n\n// Custom comparison function\nconst CustomMemoComponent = React.memo(\n ({ user, settings }) => {\n return ;\n },\n (prevProps, nextProps) => {\n // Custom comparison logic\n return prevProps.user.id === nextProps.user.id &&\n prevProps.settings.theme === nextProps.settings.theme;\n }\n);"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"useMemo() - Memoizing Expensive Calculations"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"useMemo memoizes the result of a computation and only recalculates when dependencies change. It helps optimize expensive calculations and object creation."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function ProductList({ products, filters, sortBy }) {\n // Expensive calculation - only runs when dependencies change\n const filteredAndSortedProducts = useMemo(() => {\n console.log('Filtering and sorting products');\n \n return products\n .filter(product => {\n return filters.category === 'all' || product.category === filters.category;\n })\n .filter(product => product.price >= filters.minPrice)\n .sort((a, b) => {\n if (sortBy === 'price') return a.price - b.price;\n if (sortBy === 'name') return a.name.localeCompare(b.name);\n return 0;\n });\n }, [products, filters, sortBy]);\n \n return (\n

\n {filteredAndSortedProducts.map(product => (\n \n ))}\n

\n );\n}"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"useCallback() - Memoizing Functions"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"useCallback memoizes a function and only creates a new function when dependencies change. It helps prevent unnecessary re-renders of child components that depend on the function."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function TodoApp({ todos }) {\n const [filter, setFilter] = useState('all');\n \n // Memoized callback - only changes when todos change\n const handleToggleTodo = useCallback((id) => {\n setTodos(prevTodos =>\n prevTodos.map(todo =>\n todo.id === id ? { ...todo, completed: !todo.completed } : todo\n )\n );\n }, []);\n \n // Memoized callback with dependencies\n const handleAddTodo = useCallback((text) => {\n const newTodo = {\n id: Date.now(),\n text,\n completed: false,\n createdAt: new Date()\n };\n setTodos(prevTodos => [...prevTodos, newTodo]);\n }, []);\n \n return (\n

\n \n

\n );\n}"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"Code Splitting with React.lazy()"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Code splitting allows you to split your code into smaller chunks that can be loaded on demand, reducing the initial bundle size and improving performance."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { Suspense, lazy } from 'react';\nimport { Routes, Route } from 'react-router-dom';\n\n// Lazy load components\nconst Home = lazy(() => import('./pages/Home'));\nconst About = lazy(() => import('./pages/About'));\nconst Contact = lazy(() => import('./pages/Contact'));\nconst Dashboard = lazy(() => import('./pages/Dashboard'));\n\n// Loading component\nconst PageLoader = () => (\n

\n Loading...\n

\n);\n\nfunction App() {\n return (\n }>\n \n } />\n } />\n } />\n } />\n \n \n );\n}"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"Virtual Scrolling for Large Lists"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Virtual scrolling renders only the visible items in a large list, dramatically improving performance for lists with thousands of items."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { FixedSizeList as List } from 'react-window';\n\nconst VirtualizedList = ({ items }) => {\n const Row = ({ index, style }) => (\n

{items[index].name}

{items[index].email}

\n );\n \n return (\n \n {Row}\n \n );\n};\n\n// Usage\nfunction App() {\n const [users, setUsers] = useState([]);\n \n useEffect(() => {\n // Load 10,000 users\n const loadUsers = async () => {\n const response = await fetch('/api/users?limit=10000');\n const data = await response.json();\n setUsers(data);\n };\n loadUsers();\n }, []);\n \n return ;\n}"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"Bundle Analysis and Optimization"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Analyzing your bundle size helps identify optimization opportunities and reduce the initial load time."}]},{"type":"codeBlock","attrs":{"language":"bash"},"content":[{"type":"text","text":"# Install bundle analyzer\nnpm install --save-dev @next/bundle-analyzer\n\n# Analyze bundle size\nnpm run build\nnpm run analyze\n\n# Or with webpack-bundle-analyzer\nnpx webpack-bundle-analyzer build/static/js/*.js"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"Performance Monitoring"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Monitor your React application performance using React DevTools Profiler and real user monitoring tools."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// React DevTools Profiler API\nimport { Profiler } from 'react';\n\nfunction onRenderCallback(id, phase, actualDuration, baseDuration, startTime, commitTime) {\n console.log('Profiler:', {\n id,\n phase,\n actualDuration,\n baseDuration,\n startTime,\n commitTime\n });\n}\n\nfunction App() {\n return (\n \n

\n \n

DevRecall

Performance Optimization

Dev
Recall