From df28767e164ad6f184bb82b96358ad06ad5dcdc9 Mon Sep 17 00:00:00 2001
From: varchasvakhare2022
 <112934587+varchasvakhare2022@users.noreply.github.com>
Date: Tue, 18 Nov 2025 07:39:36 +0530
Subject: [PATCH] Fix: Move renderSearchSuggestion outside component to prevent
 function recreation on each render (Fixes #89)

---
 patterns/15.list-components.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/patterns/15.list-components.md b/patterns/15.list-components.md
index 9f4e013..3485274 100644
--- a/patterns/15.list-components.md
+++ b/patterns/15.list-components.md
@@ -3,13 +3,13 @@ Lists and other things that are almost components
 
 Instead of making a separate component for lists I can then generate the results like:
 ```javascript
-const SearchSuggestions = (props) => {
-  // renderSearchSuggestion() behaves as a pseudo SearchSuggestion component
-  // keep it self contained and it should be easy to extract later if needed
-  const renderSearchSuggestion = listItem => (
-    <li key={listItem.id}>{listItem.name} {listItem.id}</li>
-  );
+// renderSearchSuggestion() behaves as a pseudo SearchSuggestion component
+// keep it self contained and it should be easy to extract later if needed
+const renderSearchSuggestion = listItem => (
+  <li key={listItem.id}>{listItem.name} {listItem.id}</li>
+);
 
+const SearchSuggestions = (props) => {
   return (
     <ul>
       {props.listItems.map(renderSearchSuggestion)}