ReactJS Performance Optimization Prompt

reactjs_performance_optimization_prompt.md

Optimizing Re-renders and Memoization:

• Find components that re-render frequently or have heavy computations. Focus optimization efforts there;
• Wrap functional components in React.memo if they render the same output given the same props.
• For computationally heavy operations or derived data, use useMemo to memoize the result between renders. Compute the value only when its dependencies change;
• If you pass callbacks to child components (especially to optimized children that rely on reference equality), wrap those in useCallback to avoid re-creating functions on every render;
• If an object is meant to remain the same across renders (e.g., a static config), define it outside the component or use a useRef to keep a stable reference;

Unnecessary Renders with Hooks optimization:

• If you have large subtrees that don’t need to update under certain conditions, conditionally render them only when needed (using {condition && <Component />}) rather than always including them and toggling via CSS;
• In event handlers or effects, if you need to update multiple state variables, do it within one callback or use functional updates;
• Using useReducer can optimize performance when multiple state values should change together;
• If you have a value that needs to persist between renders but changing it shouldn’t trigger a re-render (e.g., a timer ID or an outside library instance), use a useRef.

Lazy Loading and Code Splitting:

• Utilize dynamic import() and React.lazy to split out heavy components or pages;
• Wrap lazy-loaded components with <Suspense fallback={<Loading />}> to show a loading indicator while the code is being fetched.
• Identify large libraries or feature modules and load them only when needed. For instance, if a certain feature (like a rich text editor or a chart library) is used only on one page, code-split that feature so users don’t pay the cost on other pages. Similarly, split at route boundaries in single-page apps using React Router’s lazy support;
• If using Next.js, take advantage of its built-in code splitting and dynamic imports. Next.js automatically splits each page into its own bundle. You can further optimize with next/dynamic for components and control loading behavior (e.g., disable SSR for a component if it’s purely client-side interactive);
• Use tools like Webpack Bundle Analyzer or Next.js Analytics to inspect your bundles. Ensure that large dependencies aren’t unintentionally included everywhere. If they are, consider moving those imports inside components or using dynamic import;

Server-Side Rendering (SSR) and Static Site Generation (SSG):

• In Next.js, use SSR (getServerSideProps) for pages that need up-to-the-moment data (e.g. user-specific dashboards), and SSG (getStaticProps) for pages that can be built ahead (e.g. marketing pages, blogs);
• Use caching with SSR to mitigate response times;
• Avoid using browser-only APIs or random values during render on initial load (e.g., avoid using Date.now() or Math.random in render for content that also rendered on server);

Virtualization for Large Lists:

• If the application needs to display very large lists or tables (hundreds or thousands of items), use virtualization techniques. Libraries like react-window or react-virtual render only the visible items in the viewport and a small buffer;
• If items have varying height, you can use a library like react-virtual or react-virtualized which handle dynamic sizes, or estimate item size and adjust as needed;
• In combination with virtualization, consider lazy-loading list data (if not all available up front). For instance, load the first chunk of items, and as the user scrolls near the end, fetch more;