From ea32d6b2c491a7cd88899d69eac979d16ab95a82 Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Thu, 2 Feb 2023 11:25:57 -0500
Subject: [PATCH] docs: use useMemo in getting image field

---
 packages/docs/content/docs/custom-previews.mdx | 6 +++---
 packages/docs/content/docs/typescript.mdx      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/docs/content/docs/custom-previews.mdx b/packages/docs/content/docs/custom-previews.mdx
index aaf58810..45024ad2 100644
--- a/packages/docs/content/docs/custom-previews.mdx
+++ b/packages/docs/content/docs/custom-previews.mdx
@@ -44,7 +44,7 @@ The following parameters will be passed to your `react_component` during render:
 
 ```js
 const PostPreview = ({ widgetFor, entry, collection, fields }) => {
-  const imageField = fields.find((field) => field.name === 'image');
+  const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
   const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return h(
@@ -63,7 +63,7 @@ CMS.registerPreviewTemplate('posts', PostPreview);
 import CMS, { useMediaAsset } from '@staticcms/core';
 
 const PostPreview = ({ widgetFor, entry, collection, fields }) => {
-  const imageField = fields.find((field) => field.name === 'image');
+  const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
   const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return (
@@ -98,7 +98,7 @@ const PostPreview = ({
   collection,
   fields,
 }: TemplatePreviewProps<Post>) => {
-  const imageField = fields.find((field) => field.name === 'image');
+  const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
   const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return (
diff --git a/packages/docs/content/docs/typescript.mdx b/packages/docs/content/docs/typescript.mdx
index dba71b9d..be9f61f0 100644
--- a/packages/docs/content/docs/typescript.mdx
+++ b/packages/docs/content/docs/typescript.mdx
@@ -109,7 +109,7 @@ const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({
 }) => {
   const dateString = useMemo(() => entry.data.date, [entry.data.date]);
 
-  const imageField = fields.find((field) => field.name === 'image');
+  const imageField = useMemo(fields.find((field) => field.name === 'image'), [fields]);
   const image = useMediaAsset(entry.data.image ?? '', collection, imageField, entry);
 
   return (