Consider memoising the gallery availability check.

[AStevensTaylor]

🧹 Nitpick | 🔵 Trivial

Consider memoising the gallery availability check.

getAddToGallery() is called during render. For consistency with AspectRatioCrop (which uses useMemo for this), consider memoising this value to avoid accessing window on every render.

♻️ Suggested improvement

+import { useCallback, useMemo, useState } from "react";
+import type { WindowWithGallery } from "@/lib/gallery";

-function getAddToGallery() {
-	return (window as WindowWithGallery).addGeneratedImage;
-}

 export function PngConverter({ imageUrl, imageName }: PngConverterProps) {
+	const addToGallery = useMemo(() => {
+		if (typeof window === "undefined") return null;
+		return (window as WindowWithGallery).addGeneratedImage;
+	}, []);

 // Then in JSX:
-{getAddToGallery() && (
+{addToGallery && (

🤖 Prompt for AI Agents

In `@src/components/PngConverter.tsx` around lines 137 - 141, In PngConverter,
avoid calling getAddToGallery() directly during every render — memoise its
result (like AspectRatioCrop) with React.useMemo: e.g. inside the PngConverter
component create const canAddToGallery = useMemo(() => getAddToGallery(), []),
then use canAddToGallery in the JSX conditional instead of getAddToGallery();
this ensures getAddToGallery (which accesses window) is only evaluated once and
keeps the addPreviewToGallery handler unchanged.

Originally posted by @coderabbitai[bot] in #44 (comment)