Extracted the grid mapping logic out of the return block into a `useMemo` hook depending on `[assets, layout, openLightbox]`. This prevents the entire photo grid—including complex Next.js `<Image>` and `<FadeIn>` components—from needlessly re-rendering every time the user navigates via the lightbox arrows or presses next/prev buttons, which previously caused `lightboxIndex` to update and trigger a re-render of the entire grid. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
738 B
738 B
YYYY-MM-DD - [Memoize grid item re-rendering]
Learning: useMemo can significantly boost the performance of long list or grid components (like PhotoGrid component) that otherwise gets re-rendered on simple interactions like navigating the image lightbox. Running standard formatting pnpm format applies huge changes across entire directories, so it's generally best to format and clean up ONLY modified files to avoid huge diff pollution in code review.
Action: Be extremely cautious of running format/lint commands at the root codebase; specify only modified directories or files, or avoid formatting if it cascades globally. Focus on targeted memoization where state changes dictate expensive array mapping operations.