From 49621f3fb1139d2713109e96b5dbf601e4813545 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Sat, 21 Mar 2026 13:03:24 +0100
Subject: [PATCH] perf: wrap BookCard and BookImage with React.memo

Prevent unnecessary re-renders of book grid items when parent
components update without changing book data.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/backoffice/app/components/BookCard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/backoffice/app/components/BookCard.tsx b/apps/backoffice/app/components/BookCard.tsx
index 5e1e330..11b2a5c 100644
--- a/apps/backoffice/app/components/BookCard.tsx
+++ b/apps/backoffice/app/components/BookCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { memo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { BookDto, ReadingStatus } from "../../lib/api";
@@ -17,7 +17,7 @@ interface BookCardProps {
   readingStatus?: ReadingStatus;
 }
 
-function BookImage({ src, alt }: { src: string; alt: string }) {
+const BookImage = memo(function BookImage({ src, alt }: { src: string; alt: string }) {
   const [isLoaded, setIsLoaded] = useState(false);
   const [hasError, setHasError] = useState(false);
 
@@ -54,9 +54,9 @@ function BookImage({ src, alt }: { src: string; alt: string }) {
       />
     </div>
   );
-}
+});
 
-export function BookCard({ book, readingStatus }: BookCardProps) {
+export const BookCard = memo(function BookCard({ book, readingStatus }: BookCardProps) {
   const { t } = useTranslation();
   const coverUrl = book.coverUrl || `/api/books/${book.id}/thumbnail`;
   const status = readingStatus ?? book.reading_status;
@@ -128,7 +128,7 @@ export function BookCard({ book, readingStatus }: BookCardProps) {
       </div>
     </Link>
   );
-}
+});
 
 interface BooksGridProps {
   books: (BookDto & { coverUrl?: string })[];