[{"id":"f3ceb163-8c9c-4c9a-b87c-e3c3e5b95d54","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"List Optimization","styles":{}}],"children":[]},{"id":"79dc580b-f442-4e4a-8333-5a02a2e62b0d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"List Optimization","styles":{"bold":true}},{"type":"text","text":" is the process of making large lists render faster in React.","styles":{}}],"children":[]},{"id":"f0c1437b-1336-42d2-8b51-830f97b8ab68","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"b30de00b-5920-45ce-9a4d-6a4129f49df4","type":"procode","props":{"code":"List Optimization = make React lists faster and smoother\n","language":"txt","filename":"","files":"[{\"id\":\"zqup0wx81\",\"name\":\"code\",\"code\":\"List Optimization = make React lists faster and smoother\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a9541c14-4a4e-4aff-a477-235acb3ea1a1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"d17b94d4-3ee3-4d49-a32d-84b3603ebd4b","type":"procode","props":{"code":"Large list\n├── 100 items\n├── 1,000 items\n├── 10,000 items\n└── needs optimization\n","language":"txt","filename":"","files":"[{\"id\":\"5xtvzhy8m\",\"name\":\"code\",\"code\":\"Large list\\n├── 100 items\\n├── 1,000 items\\n├── 10,000 items\\n└── needs optimization\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1112c7b4-598d-4dde-9682-e49f5d11f6ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"534d5044-7483-44c6-a973-f64fed955b34","type":"procode","props":{"code":"Small list → normal map is okay\nLarge list → optimize rendering\n","language":"txt","filename":"","files":"[{\"id\":\"ed1xnefep\",\"name\":\"code\",\"code\":\"Small list → normal map is okay\\nLarge list → optimize rendering\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af85636d-54e9-4e98-9dff-7358cd4d9a96","type":"divider","props":{},"children":[]},{"id":"ff456f01-eace-450c-baf3-497ba1bcccf2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"4c811ddd-f30b-454a-85e4-0b3b668ec0a7","type":"procode","props":{"code":"List Optimization\n├── Improves rendering speed\n├── Reduces unnecessary re-renders\n├── Uses stable keys\n├── Uses pagination\n├── Uses infinite scroll\n├── Uses virtualization\n├── Uses memoization\n├── Avoids heavy calculation during render\n└── Makes UI smoother\n","language":"txt","filename":"","files":"[{\"id\":\"btuqp98kk\",\"name\":\"code\",\"code\":\"List Optimization\\n├── Improves rendering speed\\n├── Reduces unnecessary re-renders\\n├── Uses stable keys\\n├── Uses pagination\\n├── Uses infinite scroll\\n├── Uses virtualization\\n├── Uses memoization\\n├── Avoids heavy calculation during render\\n└── Makes UI smoother\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dc913e9d-e142-4345-94e7-5e124c9f251b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"36117600-5b99-4952-8e0a-8d1724eb5748","type":"procode","props":{"code":"React should render only what is needed.\n","language":"txt","filename":"","files":"[{\"id\":\"40uz19q5n\",\"name\":\"code\",\"code\":\"React should render only what is needed.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cae55bca-75ac-4b8d-9d11-c4a0715c924b","type":"divider","props":{},"children":[]},{"id":"04da4fc3-8ec5-468a-825d-2e004464f51b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic List Rendering","styles":{}}],"children":[]},{"id":"bd7cc197-a20a-4c8e-b8c5-e5ce58f19aa3","type":"procode","props":{"code":"type Product = {\n id: number\n name: string\n price: number\n}\n\nconst products: Product[] = [\n { id: 1, name: \"Laptop\", price: 1000 },\n { id: 2, name: \"Mouse\", price: 50 },\n { id: 3, name: \"Keyboard\", price: 80 },\n]\n\nexport default function ProductList() {\n return (\n

\n {product.name} - ${product.price}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"a7g27fq9n\",\"name\":\"code\",\"code\":\"type Product = {\\n id: number\\n name: string\\n price: number\\n}\\n\\nconst products: Product[] = [\\n { id: 1, name: \\\"Laptop\\\", price: 1000 },\\n { id: 2, name: \\\"Mouse\\\", price: 50 },\\n { id: 3, name: \\\"Keyboard\\\", price: 80 },\\n]\\n\\nexport default function ProductList() {\\n return (\\n

\\n {product.name} - ${product.price}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"541e1a8e-28b5-47bc-87d0-4038cf7769c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"f12040c1-a5d0-479e-9165-147643f42267","type":"procode","props":{"code":"products array\n├── map each product\n├── render li\n├── add key\n└── show list in UI\n","language":"txt","filename":"","files":"[{\"id\":\"gfi4h2q6m\",\"name\":\"code\",\"code\":\"products array\\n├── map each product\\n├── render li\\n├── add key\\n└── show list in UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0bf327eb-b7d9-483b-a9ac-f561bdfb4caa","type":"divider","props":{},"children":[]},{"id":"e2e8a105-7c6a-4d63-ba92-ef24bf5ac1ac","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Why List Optimization Matters","styles":{}}],"children":[]},{"id":"fff55fdc-c91e-4222-ae18-d2313402c287","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When list is small, React can render it easily.","styles":{}}],"children":[]},{"id":"9a76026d-1787-4b72-a37d-722164a53a58","type":"procode","props":{"code":"10 items\n└── usually fine\n","language":"txt","filename":"","files":"[{\"id\":\"03oo94wur\",\"name\":\"code\",\"code\":\"10 items\\n└── usually fine\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb42ea75-55f8-458e-820a-2f8039bb21bd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"But when list is large:","styles":{}}],"children":[]},{"id":"b41b8811-a725-495b-b3b7-4d2d3880cf5e","type":"procode","props":{"code":"10,000 items\n├── many DOM elements\n├── slower render\n├── slower update\n├── laggy scrolling\n└── bad user experience\n","language":"txt","filename":"","files":"[{\"id\":\"9gmw69bxr\",\"name\":\"code\",\"code\":\"10,000 items\\n├── many DOM elements\\n├── slower render\\n├── slower update\\n├── laggy scrolling\\n└── bad user experience\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3e187c2d-2841-42af-a937-bbc9f05e0981","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a38b19d6-eb22-42be-82c6-a19b79bd5fba","type":"procode","props":{"code":"More rendered items = more work for browser.\n","language":"txt","filename":"","files":"[{\"id\":\"97a5ufvni\",\"name\":\"code\",\"code\":\"More rendered items = more work for browser.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d548ed3c-f88f-4563-9d50-0581729537e3","type":"divider","props":{},"children":[]},{"id":"3ac6ad9d-08f6-4fd4-b2c9-81f8697b9dce","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Use Stable Keys","styles":{}}],"children":[]},{"id":"8ac74571-b5cf-4269-a8c3-90e9c7ab15cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React needs ","styles":{}},{"type":"text","text":"key","styles":{"code":true}},{"type":"text","text":" to track each list item.","styles":{}}],"children":[]},{"id":"8683883b-6e53-4c97-8de1-f11aa48058bf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"0cb69be9-0407-4b96-9401-d8266fb7e3d8","type":"procode","props":{"code":"{products.map((product) => (\n

\n {product.name}\n

\n))}\n","language":"tsx","filename":"","files":"[{\"id\":\"y13raaeu9\",\"name\":\"code\",\"code\":\"{products.map((product) => (\\n

\\n {product.name}\\n

\\n))}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"047b0d60-e4a4-4040-8822-bdb3f221c2fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Avoid:","styles":{}}],"children":[]},{"id":"1b83f477-627a-4575-9186-cab56995e1ec","type":"procode","props":{"code":"{products.map((product, index) => (\n

\n {product.name}\n

\n))}\n","language":"tsx","filename":"","files":"[{\"id\":\"85s6bqqpp\",\"name\":\"code\",\"code\":\"{products.map((product, index) => (\\n

\\n {product.name}\\n

\\n))}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75af3a38-4172-41a3-83ba-08d0f7eb4377","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"acd29d93-3135-49e7-8094-e166b2fb87ec","type":"procode","props":{"code":"Using index as key can cause:\n├── wrong UI update\n├── wrong item state\n├── unnecessary re-render\n└── bugs when item order changes\n","language":"txt","filename":"","files":"[{\"id\":\"9fyhbj0i5\",\"name\":\"code\",\"code\":\"Using index as key can cause:\\n├── wrong UI update\\n├── wrong item state\\n├── unnecessary re-render\\n└── bugs when item order changes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eef4e59c-9b8f-4831-919d-06864fc527a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"29ad2833-73b4-4f23-a4bd-8d6824a3e090","type":"procode","props":{"code":"Use real unique id for key.\n","language":"txt","filename":"","files":"[{\"id\":\"1tfo1ui6j\",\"name\":\"code\",\"code\":\"Use real unique id for key.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5b7c726e-c5c3-4184-a39b-3ab0fa9d44f9","type":"divider","props":{},"children":[]},{"id":"4cedc941-128c-427e-a404-fdae8fe2cb0a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Good Key Examples","styles":{}}],"children":[]},{"id":"230b786d-9737-4e1b-a000-beb83176cdbd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good keys:","styles":{}}],"children":[]},{"id":"1fe27f80-d4f7-4582-9c47-54b22f13486c","type":"procode","props":{"code":"key={user.id}\nkey={product.id}\nkey={todo.id}\nkey={order.uuid}\nkey={category.slug}\n","language":"tsx","filename":"","files":"[{\"id\":\"v9k87892y\",\"name\":\"code\",\"code\":\"key={user.id}\\nkey={product.id}\\nkey={todo.id}\\nkey={order.uuid}\\nkey={category.slug}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84972e1e-49b3-4b5b-9cc3-eff5673e1661","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad keys:","styles":{}}],"children":[]},{"id":"c3bd3768-9d39-4651-95c3-2ca0fd272f26","type":"procode","props":{"code":"key={index}\nkey={Math.random()}\nkey={Date.now()}\n","language":"tsx","filename":"","files":"[{\"id\":\"vuf8ugzzb\",\"name\":\"code\",\"code\":\"key={index}\\nkey={Math.random()}\\nkey={Date.now()}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"94d7b319-bac2-4332-9763-5ce0191b65d1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"15b1b6da-b252-42ab-aa19-da099aea14ef","type":"procode","props":{"code":"Key should be unique and stable.\n","language":"txt","filename":"","files":"[{\"id\":\"ayfqi65dm\",\"name\":\"code\",\"code\":\"Key should be unique and stable.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7a60b760-6314-4b10-a2ae-76002de7b6ad","type":"divider","props":{},"children":[]},{"id":"27992b4f-7e80-4b23-a17c-bd4dbd35fa60","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Rendering Too Much Data","styles":{}}],"children":[]},{"id":"1dab40bc-d892-426d-9b9b-fa78a7b3332c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"8fad56e1-dec2-4a6f-a66f-c06b32d9578c","type":"procode","props":{"code":"{products.map((product) => (\n \n))}\n","language":"tsx","filename":"","files":"[{\"id\":\"bgc7ph7b9\",\"name\":\"code\",\"code\":\"{products.map((product) => (\\n \\n))}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33911164-b507-41da-91bc-768366b1dc96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If ","styles":{}},{"type":"text","text":"products","styles":{"code":true}},{"type":"text","text":" contains 10,000 items, React renders 10,000 cards.","styles":{}}],"children":[]},{"id":"e6e42435-208d-4b3e-8610-8b37bf7006e5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"4fc307e0-278d-46b2-abac-31c4e616ba01","type":"procode","props":{"code":"const visibleProducts = products.slice(0, 20)\n\nreturn (\n

\n {visibleProducts.map((product) => (\n \n ))}\n

\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"bo76oh1ph\",\"name\":\"code\",\"code\":\"const visibleProducts = products.slice(0, 20)\\n\\nreturn (\\n

\\n {visibleProducts.map((product) => (\\n \\n ))}\\n

\\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18d1b6ce-f7d6-413e-8bd2-f944d73a1914","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9f243c8a-3507-4bb7-933a-0dbb518a1aef","type":"procode","props":{"code":"Render only the data user needs to see.\n","language":"txt","filename":"","files":"[{\"id\":\"6suw1qf02\",\"name\":\"code\",\"code\":\"Render only the data user needs to see.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2ade885d-ac48-4e23-90f7-5fad0b92f34a","type":"divider","props":{},"children":[]},{"id":"e77e95cd-d805-4ddf-89f2-bc368810f250","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Pagination","styles":{}}],"children":[]},{"id":"a5260219-d079-4d5f-b7bc-184665349b8e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Pagination splits list into pages.","styles":{}}],"children":[]},{"id":"5a95c768-6a1a-485d-998b-2980ca88daff","type":"procode","props":{"code":"Products\n├── Page 1 → 20 items\n├── Page 2 → 20 items\n├── Page 3 → 20 items\n└── Page 4 → 20 items\n","language":"txt","filename":"","files":"[{\"id\":\"d66wu7rqx\",\"name\":\"code\",\"code\":\"Products\\n├── Page 1 → 20 items\\n├── Page 2 → 20 items\\n├── Page 3 → 20 items\\n└── Page 4 → 20 items\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e0c1e9a3-5a0e-4978-8ba6-ac9ca2e8e1ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"f346ada6-018d-403c-986e-88d70f85d9cf","type":"procode","props":{"code":"import { useState } from \"react\"\n\ntype Product = {\n id: number\n name: string\n}\n\ntype ProductListProps = {\n products: Product[]\n}\n\nexport function ProductList({ products }: ProductListProps) {\n const [page, setPage] = useState(1)\n\n const limit = 10\n const startIndex = (page - 1) * limit\n const endIndex = startIndex + limit\n\n const visibleProducts = products.slice(startIndex, endIndex)\n\n return (\n

\n {product.name}\n

\n\n setPage(page - 1)}\n disabled={page === 1}\n >\n Previous\n \n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"34h5s6vaw\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\ntype Product = {\\n id: number\\n name: string\\n}\\n\\ntype ProductListProps = {\\n products: Product[]\\n}\\n\\nexport function ProductList({ products }: ProductListProps) {\\n const [page, setPage] = useState(1)\\n\\n const limit = 10\\n const startIndex = (page - 1) * limit\\n const endIndex = startIndex + limit\\n\\n const visibleProducts = products.slice(startIndex, endIndex)\\n\\n return (\\n

\\n

\\n {product.name}\\n

\\n\\n setPage(page - 1)}\\n disabled={page === 1}\\n >\\n Previous\\n \\n\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1da227f9-575e-432a-bbe4-9c482fa49371","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"8665a61b-470a-4f58-a8c2-8845b190ebaa","type":"procode","props":{"code":"Pagination\n├── choose page\n├── calculate start index\n├── calculate end index\n├── slice data\n└── render only current page\n","language":"txt","filename":"","files":"[{\"id\":\"w6lvpl6qz\",\"name\":\"code\",\"code\":\"Pagination\\n├── choose page\\n├── calculate start index\\n├── calculate end index\\n├── slice data\\n└── render only current page\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8da4568f-06a0-488d-820c-5033696ad37f","type":"divider","props":{},"children":[]},{"id":"c5a84ab6-e728-47e2-8faa-aa259161ffec","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Infinite Scroll","styles":{}}],"children":[]},{"id":"0de93cf8-f8d8-4992-acfe-bf01e97b3293","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Infinite scroll loads more data when user reaches the bottom.","styles":{}}],"children":[]},{"id":"ce1a4f84-986c-4585-a83a-046ad6374a93","type":"procode","props":{"code":"Infinite Scroll\n├── show first items\n├── user scrolls down\n├── load more items\n├── append new items\n└── continue scrolling\n","language":"txt","filename":"","files":"[{\"id\":\"762aeijsb\",\"name\":\"code\",\"code\":\"Infinite Scroll\\n├── show first items\\n├── user scrolls down\\n├── load more items\\n├── append new items\\n└── continue scrolling\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"51fb9842-45a3-401a-bac4-c8dd4d67303a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple example:","styles":{}}],"children":[]},{"id":"47bed1aa-67fe-4312-b454-8ba2c4805e7a","type":"procode","props":{"code":"import { useState } from \"react\"\n\ntype Product = {\n id: number\n name: string\n}\n\ntype ProductListProps = {\n products: Product[]\n}\n\nexport function ProductList({ products }: ProductListProps) {\n const [limit, setLimit] = useState(20)\n\n const visibleProducts = products.slice(0, limit)\n\n return (\n

\n {visibleProducts.map((product) => (\n

\n {product.name}\n

\n ))}\n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"3hkrx2cwq\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\ntype Product = {\\n id: number\\n name: string\\n}\\n\\ntype ProductListProps = {\\n products: Product[]\\n}\\n\\nexport function ProductList({ products }: ProductListProps) {\\n const [limit, setLimit] = useState(20)\\n\\n const visibleProducts = products.slice(0, limit)\\n\\n return (\\n

\\n {visibleProducts.map((product) => (\\n

\\n {product.name}\\n

\\n ))}\\n\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"22f0c068-4524-4b86-8d5b-1fff4c389e02","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f66566ef-9562-41bc-93c6-a007519aea84","type":"procode","props":{"code":"Load more items only when needed.\n","language":"txt","filename":"","files":"[{\"id\":\"wcys9it7s\",\"name\":\"code\",\"code\":\"Load more items only when needed.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec586829-8694-49f3-8c7b-fd6b72af56d1","type":"divider","props":{},"children":[]},{"id":"142abbe6-c94e-49d5-a1aa-4bb77b0af3cb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Virtualization","styles":{}}],"children":[]},{"id":"fa654913-0d02-4453-a029-125e961b8cdc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Virtualization means only visible items are rendered.","styles":{}}],"children":[]},{"id":"ceaa2d1c-68b5-4af2-8975-3e9ea2c7ff1e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"8f659cd3-0067-4bbf-9f2b-93b97ed3e1fd","type":"procode","props":{"code":"List has 10,000 items\n├── user sees around 20 items\n├── React renders around 20 items\n└── hidden items are not rendered yet\n","language":"txt","filename":"","files":"[{\"id\":\"yqfit7ghu\",\"name\":\"code\",\"code\":\"List has 10,000 items\\n├── user sees around 20 items\\n├── React renders around 20 items\\n└── hidden items are not rendered yet\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cbd18ad7-ef66-4997-9230-34588658cc3f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"8a2bc3e0-a64f-4b6a-bdb3-b61146dfa8ed","type":"procode","props":{"code":"Virtualization = render only visible list items\n","language":"txt","filename":"","files":"[{\"id\":\"ufrsv5pj5\",\"name\":\"code\",\"code\":\"Virtualization = render only visible list items\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4b76448f-da14-41ef-b1f2-da0d1ff4d64b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good for:","styles":{}}],"children":[]},{"id":"860d25e2-031b-45cd-a5c6-54feb5c45541","type":"procode","props":{"code":"Huge tables\nLong chat messages\nLarge product lists\nLarge admin dashboards\nLarge search results\nLarge logs\n","language":"txt","filename":"","files":"[{\"id\":\"fvj8bviz7\",\"name\":\"code\",\"code\":\"Huge tables\\nLong chat messages\\nLarge product lists\\nLarge admin dashboards\\nLarge search results\\nLarge logs\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62e4882f-f4c5-4a47-b305-642d422fde8c","type":"divider","props":{},"children":[]},{"id":"d1a2a90f-2c6f-413a-85d8-62a91e54eec0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Normal List vs Virtualized List","styles":{}}],"children":[]},{"id":"fe2a029b-1d79-4663-903c-4be82b27645f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Normal list:","styles":{}}],"children":[]},{"id":"1f8c2234-3084-440b-90e0-f53f86c26ce0","type":"procode","props":{"code":"10,000 items\n└── React renders 10,000 DOM elements\n","language":"txt","filename":"","files":"[{\"id\":\"pkzemn6dy\",\"name\":\"code\",\"code\":\"10,000 items\\n└── React renders 10,000 DOM elements\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3beb5cc1-32ac-496d-bc13-29045d7033a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Virtualized list:","styles":{}}],"children":[]},{"id":"d395be9a-9210-42e3-8aff-88c3149ae584","type":"procode","props":{"code":"10,000 items\n├── React renders visible items only\n├── user scrolls\n├── visible window changes\n└── React updates displayed items\n","language":"txt","filename":"","files":"[{\"id\":\"27hky3pat\",\"name\":\"code\",\"code\":\"10,000 items\\n├── React renders visible items only\\n├── user scrolls\\n├── visible window changes\\n└── React updates displayed items\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30152333-2e52-4f30-80f3-57c60de8bd5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"a3c6a445-5188-4cf7-857e-f59e8cf08e75","type":"procode","props":{"code":"Very large list → use virtualization.\n","language":"txt","filename":"","files":"[{\"id\":\"pqh3s5tt4\",\"name\":\"code\",\"code\":\"Very large list → use virtualization.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"17199d7e-09ef-42a8-90f7-a975ddb59bf5","type":"divider","props":{},"children":[]},{"id":"1505e2e5-1af2-4e07-a0f6-d1b666a9d9e6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React.memo for List Item","styles":{}}],"children":[]},{"id":"de935066-4829-4d10-a884-2580b0c7feb7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"React.memo","styles":{"code":true}},{"type":"text","text":" to prevent item component from re-rendering when props do not change.","styles":{}}],"children":[]},{"id":"520107d1-12b8-4339-9f68-17d8b24a699a","type":"procode","props":{"code":"import { memo } from \"react\"\n\ntype Product = {\n id: number\n name: string\n price: number\n}\n\ntype ProductCardProps = {\n product: Product\n}\n\nconst ProductCard = memo(function ProductCard({\n product,\n}: ProductCardProps) {\n return (\n

{product.name}

${product.price}

\n )\n})\n\nexport function ProductList({ products }: { products: Product[] }) {\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"6hpi4ghuy\",\"name\":\"code\",\"code\":\"import { memo } from \\\"react\\\"\\n\\ntype Product = {\\n id: number\\n name: string\\n price: number\\n}\\n\\ntype ProductCardProps = {\\n product: Product\\n}\\n\\nconst ProductCard = memo(function ProductCard({\\n product,\\n}: ProductCardProps) {\\n return (\\n

\\n

{product.name}

\\n

${product.price}

\\n

\\n )\\n})\\n\\nexport function ProductList({ products }: { products: Product[] }) {\\n return (\\n

\\n {products.map((product) => (\\n \\n ))}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1fa302e8-1d0d-4166-bca0-440eacf166c4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b32f9a44-822e-4c89-be85-bcacec1d0979","type":"procode","props":{"code":"React.memo helps avoid unnecessary list item re-renders.\n","language":"txt","filename":"","files":"[{\"id\":\"ggyur8uqo\",\"name\":\"code\",\"code\":\"React.memo helps avoid unnecessary list item re-renders.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a0644d8-cc38-4536-bae4-192669914bd4","type":"divider","props":{},"children":[]},{"id":"59783145-d4c6-46f5-bfd6-6ca9c9e7eba7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"useMemo for Filtered List","styles":{}}],"children":[]},{"id":"5663dc1c-4e07-4ffa-863f-5c202a9a9372","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If filtering is expensive, use ","styles":{}},{"type":"text","text":"useMemo","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"dd60b5b0-695b-45a6-93ad-bf4126b8566b","type":"procode","props":{"code":"import { useMemo, useState } from \"react\"\n\ntype Product = {\n id: number\n name: string\n category: string\n}\n\nexport function ProductList({ products }: { products: Product[] }) {\n const [search, setSearch] = useState(\"\")\n\n const filteredProducts = useMemo(() => {\n return products.filter((product) =>\n product.name.toLowerCase().includes(search.toLowerCase())\n )\n }, [products, search])\n\n return (\n

\n setSearch(event.target.value)}\n placeholder=\"Search product...\"\n />\n\n {filteredProducts.map((product) => (\n

\n {product.name}\n

\n ))}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"gtiqudtxc\",\"name\":\"code\",\"code\":\"import { useMemo, useState } from \\\"react\\\"\\n\\ntype Product = {\\n id: number\\n name: string\\n category: string\\n}\\n\\nexport function ProductList({ products }: { products: Product[] }) {\\n const [search, setSearch] = useState(\\\"\\\")\\n\\n const filteredProducts = useMemo(() => {\\n return products.filter((product) =>\\n product.name.toLowerCase().includes(search.toLowerCase())\\n )\\n }, [products, search])\\n\\n return (\\n

\\n setSearch(event.target.value)}\\n placeholder=\\\"Search product...\\\"\\n />\\n\\n {filteredProducts.map((product) => (\\n

\\n {product.name}\\n

\\n ))}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"97b4a2d4-27df-46f3-85db-a7bc2d0e77cf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3e567dbe-18bf-4fa3-b08f-26f2970715fa","type":"procode","props":{"code":"useMemo prevents recalculating filtered list unnecessarily.\n","language":"txt","filename":"","files":"[{\"id\":\"st8ssbmty\",\"name\":\"code\",\"code\":\"useMemo prevents recalculating filtered list unnecessarily.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1cafeb4f-8373-471b-86e9-4e3fcc0f91ee","type":"divider","props":{},"children":[]},{"id":"3caf03ea-2e5b-4cf9-9391-cab9295718d3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"useCallback for List Item Actions","styles":{}}],"children":[]},{"id":"31cc3433-95d4-42d9-815d-796b34b0ee8b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If list item receives function props, use ","styles":{}},{"type":"text","text":"useCallback","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3d8de929-dc11-4a74-af76-6392146337fd","type":"procode","props":{"code":"import { memo, useCallback } from \"react\"\n\ntype Product = {\n id: number\n name: string\n}\n\ntype ProductItemProps = {\n product: Product\n onDelete: (id: number) => void\n}\n\nconst ProductItem = memo(function ProductItem({\n product,\n onDelete,\n}: ProductItemProps) {\n return (\n

{product.name}

\n\n \n

\n )\n})\n\nexport function ProductList({ products }: { products: Product[] }) {\n const handleDelete = useCallback((id: number) => {\n console.log(\"Delete product:\", id)\n }, [])\n\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"yt4lv1z54\",\"name\":\"code\",\"code\":\"import { memo, useCallback } from \\\"react\\\"\\n\\ntype Product = {\\n id: number\\n name: string\\n}\\n\\ntype ProductItemProps = {\\n product: Product\\n onDelete: (id: number) => void\\n}\\n\\nconst ProductItem = memo(function ProductItem({\\n product,\\n onDelete,\\n}: ProductItemProps) {\\n return (\\n

\\n

{product.name}

\\n\\n \\n

\\n )\\n})\\n\\nexport function ProductList({ products }: { products: Product[] }) {\\n const handleDelete = useCallback((id: number) => {\\n console.log(\\\"Delete product:\\\", id)\\n }, [])\\n\\n return (\\n

\\n {products.map((product) => (\\n \\n ))}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"12412e04-b552-4adf-89cc-bdff669c36d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a6198c2e-d060-492e-baed-0caaf5b7ca6b","type":"procode","props":{"code":"useCallback keeps function reference stable.\n","language":"txt","filename":"","files":"[{\"id\":\"hezb7p693\",\"name\":\"code\",\"code\":\"useCallback keeps function reference stable.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7b82940c-5ce8-46d3-9806-b6af9d694738","type":"divider","props":{},"children":[]},{"id":"807fad80-e81b-443d-87ca-255215bb2e56","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Heavy Logic Inside map","styles":{}}],"children":[]},{"id":"31781f36-3810-48a9-a39c-550e1b231151","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"9aaa2c9a-55e2-44ab-9a0e-48d0a07a9678","type":"procode","props":{"code":"{products.map((product) => {\n const total = product.orders.reduce((sum, order) => {\n return sum + order.price\n }, 0)\n\n return (\n \n )\n})}\n","language":"tsx","filename":"","files":"[{\"id\":\"vwvzhm0b6\",\"name\":\"code\",\"code\":\"{products.map((product) => {\\n const total = product.orders.reduce((sum, order) => {\\n return sum + order.price\\n }, 0)\\n\\n return (\\n \\n )\\n})}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6633a96-9c18-42e5-ae73-29444889c50e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"f72aba51-b06e-476f-8f4e-08eaf84df85e","type":"procode","props":{"code":"const productsWithTotal = useMemo(() => {\n return products.map((product) => {\n const total = product.orders.reduce((sum, order) => {\n return sum + order.price\n }, 0)\n\n return {\n ...product,\n total,\n }\n })\n}, [products])\n","language":"tsx","filename":"","files":"[{\"id\":\"rj76y7gor\",\"name\":\"code\",\"code\":\"const productsWithTotal = useMemo(() => {\\n return products.map((product) => {\\n const total = product.orders.reduce((sum, order) => {\\n return sum + order.price\\n }, 0)\\n\\n return {\\n ...product,\\n total,\\n }\\n })\\n}, [products])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"51c1d9a6-ce7f-4770-b792-1a328c02ba62","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then render:","styles":{}}],"children":[]},{"id":"98d87161-646e-4c9d-b4e9-8114e8680ae4","type":"procode","props":{"code":"{productsWithTotal.map((product) => (\n \n))}\n","language":"tsx","filename":"","files":"[{\"id\":\"n2cghss1d\",\"name\":\"code\",\"code\":\"{productsWithTotal.map((product) => (\\n \\n))}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3045a5f2-934e-4e2a-9e96-024a85937c7b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ab6897f0-13a6-48f7-a0ac-58631b6d3982","type":"procode","props":{"code":"Do expensive calculation before rendering list.\n","language":"txt","filename":"","files":"[{\"id\":\"lfvbrqptr\",\"name\":\"code\",\"code\":\"Do expensive calculation before rendering list.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56ae30bd-b865-4cb5-8457-92ebc65e4ce5","type":"divider","props":{},"children":[]},{"id":"2807806b-91a9-4506-9a63-8b48183707ac","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Inline Object Props","styles":{}}],"children":[]},{"id":"0c133676-9574-4869-a93e-b924dab76df0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"d5fecd53-1857-44db-b632-f38896687a4a","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"w6998s52n\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ccb145ef-8323-46f7-8eee-c3070e998aae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"977aefc8-1e5a-45ca-a775-106d1271fcbb","type":"procode","props":{"code":"Inline object creates new object every render.\n","language":"txt","filename":"","files":"[{\"id\":\"oxk9obgm7\",\"name\":\"code\",\"code\":\"Inline object creates new object every render.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e2118565-acf1-490d-8b85-5424106bb9ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"ee71cfbb-5379-4f56-bb26-d319cdbee96f","type":"procode","props":{"code":"const cardStyle = {\n borderRadius: \"12px\",\n padding: \"16px\",\n}\n\n\n","language":"tsx","filename":"","files":"[{\"id\":\"3exsynjbd\",\"name\":\"code\",\"code\":\"const cardStyle = {\\n borderRadius: \\\"12px\\\",\\n padding: \\\"16px\\\",\\n}\\n\\n\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f9f2ce57-0b38-41f4-b08a-59fbfdfd72d5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"cb32253e-055c-4460-9c65-79b728ff34ec","type":"procode","props":{"code":"Stable props help memoized components work better.\n","language":"txt","filename":"","files":"[{\"id\":\"4ng5pk2m5\",\"name\":\"code\",\"code\":\"Stable props help memoized components work better.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9025792-2066-47a3-942a-c735c94af07c","type":"divider","props":{},"children":[]},{"id":"63d8ed3e-e83c-4e65-9715-330eca744d1a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Inline Function When Needed","styles":{}}],"children":[]},{"id":"623a54cd-8766-4006-89ea-481a196c2b75","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For small lists, this is okay:","styles":{}}],"children":[]},{"id":"4a78cb47-eca3-4623-af12-3b1712b77e7d","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"6eg5a5ovz\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"127cd608-a917-4e64-a71b-f86395d39113","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For large optimized lists, prefer stable handler pattern.","styles":{}}],"children":[]},{"id":"2400385f-94d8-4867-83a4-e1dea36d2f07","type":"procode","props":{"code":"const handleDelete = useCallback((id: number) => {\n deleteProduct(id)\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"l81jc59de\",\"name\":\"code\",\"code\":\"const handleDelete = useCallback((id: number) => {\\n deleteProduct(id)\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d114b62e-214c-45f2-bb49-e900a832c980","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"12389421-d7e3-4812-95ba-a6043d06b389","type":"procode","props":{"code":"Inline function is not always bad,\nbut can matter in large memoized lists.\n","language":"txt","filename":"","files":"[{\"id\":\"mldthluce\",\"name\":\"code\",\"code\":\"Inline function is not always bad,\\nbut can matter in large memoized lists.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fec6bc83-2168-4fa4-8dbf-ff86235ff106","type":"divider","props":{},"children":[]},{"id":"fefc3f93-d346-4fd1-b127-0d6db18c759b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Search Optimization","styles":{}}],"children":[]},{"id":"fa3d9fce-1882-4a23-a5db-8ad5e0312895","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"c647a282-0b67-4b92-b9e1-90de0fe23a9f","type":"procode","props":{"code":"const filteredProducts = products.filter((product) =>\n product.name.toLowerCase().includes(search.toLowerCase())\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"0s7hzhl80\",\"name\":\"code\",\"code\":\"const filteredProducts = products.filter((product) =>\\n product.name.toLowerCase().includes(search.toLowerCase())\\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0db08e37-bd36-4a8a-95d8-344d474990c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This runs on every render.","styles":{}}],"children":[]},{"id":"befcf6d6-0256-48f5-9927-f813f3e84c5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"2e7191f4-ad88-46f3-a457-94aeb2243aa8","type":"procode","props":{"code":"const filteredProducts = useMemo(() => {\n return products.filter((product) =>\n product.name.toLowerCase().includes(search.toLowerCase())\n )\n}, [products, search])\n","language":"tsx","filename":"","files":"[{\"id\":\"sgsow3j3l\",\"name\":\"code\",\"code\":\"const filteredProducts = useMemo(() => {\\n return products.filter((product) =>\\n product.name.toLowerCase().includes(search.toLowerCase())\\n )\\n}, [products, search])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eafebd00-9ce7-4d04-a896-f4eb7081b64d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5c1a1064-8e33-4d16-8007-5d1cb3455399","type":"procode","props":{"code":"Memoize filtered data when list is large.\n","language":"txt","filename":"","files":"[{\"id\":\"amrvsjb07\",\"name\":\"code\",\"code\":\"Memoize filtered data when list is large.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5a907eb-7fe3-4b78-b7dc-540bb3d52796","type":"divider","props":{},"children":[]},{"id":"5afdb989-93c7-40d0-9e76-9a39622d617e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Debounced Search","styles":{}}],"children":[]},{"id":"95e53c67-78de-4ac2-8045-1ec7e2fa4913","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Debounce waits before running search.","styles":{}}],"children":[]},{"id":"41ff1d97-7948-4fbe-a7f4-457e300db7b1","type":"procode","props":{"code":"User types: r\nUser types: re\nUser types: rea\nUser types: reac\nUser types: react\n└── search runs after user stops typing\n","language":"txt","filename":"","files":"[{\"id\":\"9jdf9jrie\",\"name\":\"code\",\"code\":\"User types: r\\nUser types: re\\nUser types: rea\\nUser types: reac\\nUser types: react\\n└── search runs after user stops typing\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec36cf80-041f-4bcc-8733-b7ebb281a532","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"372319e3-f1b2-4db0-b76f-bcad9172b77a","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport function useDebounce(value: string, delay = 500) {\n const [debouncedValue, setDebouncedValue] = useState(value)\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDebouncedValue(value)\n }, delay)\n\n return () => {\n clearTimeout(timer)\n }\n }, [value, delay])\n\n return debouncedValue\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"kj5h5mxtl\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport function useDebounce(value: string, delay = 500) {\\n const [debouncedValue, setDebouncedValue] = useState(value)\\n\\n useEffect(() => {\\n const timer = setTimeout(() => {\\n setDebouncedValue(value)\\n }, delay)\\n\\n return () => {\\n clearTimeout(timer)\\n }\\n }, [value, delay])\\n\\n return debouncedValue\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a05e16b2-c42f-4970-b1fb-44fae0069bf5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"832731fb-ad5e-4ebe-9404-7248bff03fdf","type":"procode","props":{"code":"const debouncedSearch = useDebounce(search, 500)\n\nconst filteredProducts = useMemo(() => {\n return products.filter((product) =>\n product.name.toLowerCase().includes(debouncedSearch.toLowerCase())\n )\n}, [products, debouncedSearch])\n","language":"tsx","filename":"","files":"[{\"id\":\"24mrab9nn\",\"name\":\"code\",\"code\":\"const debouncedSearch = useDebounce(search, 500)\\n\\nconst filteredProducts = useMemo(() => {\\n return products.filter((product) =>\\n product.name.toLowerCase().includes(debouncedSearch.toLowerCase())\\n )\\n}, [products, debouncedSearch])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"019e0f80-9c9b-437d-abfd-f6af27d14669","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"cdf9ebcc-de80-4014-8812-d8b277195d40","type":"procode","props":{"code":"Debounce prevents filtering or API request on every keystroke.\n","language":"txt","filename":"","files":"[{\"id\":\"uklcqvmzt\",\"name\":\"code\",\"code\":\"Debounce prevents filtering or API request on every keystroke.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"08fb651c-4f77-4ee2-938e-0cd44475768b","type":"divider","props":{},"children":[]},{"id":"4b89ec16-b6df-4765-84f5-55eb9983e033","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server-side Pagination","styles":{}}],"children":[]},{"id":"0e6ba363-4bc6-46d6-a63d-c6ad96ed9353","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For very large data, do not load everything to frontend.","styles":{}}],"children":[]},{"id":"115914be-a9a4-499d-b7aa-b1161705df2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"050f4f1b-a97a-461c-9a68-f42fa060a935","type":"procode","props":{"code":"Backend sends 100,000 products\nReact filters and renders client-side\n","language":"txt","filename":"","files":"[{\"id\":\"g32zzcdek\",\"name\":\"code\",\"code\":\"Backend sends 100,000 products\\nReact filters and renders client-side\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"874886bd-fc71-48d6-a019-7ea8e6960ac9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"fa293c56-1f36-41c3-9f46-3b876f6fe0ab","type":"procode","props":{"code":"React asks:\n├── page 1\n├── limit 20\n├── search keyword\n└── backend returns only needed data\n","language":"txt","filename":"","files":"[{\"id\":\"79v83nxb0\",\"name\":\"code\",\"code\":\"React asks:\\n├── page 1\\n├── limit 20\\n├── search keyword\\n└── backend returns only needed data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e846947-9b4b-404c-9539-419ba66a546c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example request:","styles":{}}],"children":[]},{"id":"739e430a-0109-4081-84d6-172c96e2565f","type":"procode","props":{"code":"async function getProducts(page: number, search: string) {\n const response = await fetch(\n `/api/products?page=${page}&search=${search}`\n )\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch products\")\n }\n\n return response.json()\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"lt5bch89v\",\"name\":\"code\",\"code\":\"async function getProducts(page: number, search: string) {\\n const response = await fetch(\\n `/api/products?page=${page}&search=${search}`\\n )\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch products\\\")\\n }\\n\\n return response.json()\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e7443bb-0a93-476f-bbfb-245c7c12cb85","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"fe6f76de-4c28-443a-8ed1-5cd202ed8bae","type":"procode","props":{"code":"Huge data should be filtered and paginated by backend.\n","language":"txt","filename":"","files":"[{\"id\":\"h6n9h12rp\",\"name\":\"code\",\"code\":\"Huge data should be filtered and paginated by backend.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ba6d95d3-53a3-4edb-a745-f137456d575b","type":"divider","props":{},"children":[]},{"id":"ea526070-7d58-440b-80c1-d0ac901606e4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"List Item Component","styles":{}}],"children":[]},{"id":"48dc1026-ffad-47e7-9d39-8f242220c8fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better structure:","styles":{}}],"children":[]},{"id":"4c7684db-3ef7-49b7-9746-9a1e7029f15f","type":"procode","props":{"code":"type Product = {\n id: number\n name: string\n price: number\n}\n\ntype ProductItemProps = {\n product: Product\n}\n\nfunction ProductItem({ product }: ProductItemProps) {\n return (\n

{product.name}

${product.price}

\n )\n}\n\nexport function ProductList({ products }: { products: Product[] }) {\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"xuigbnl89\",\"name\":\"code\",\"code\":\"type Product = {\\n id: number\\n name: string\\n price: number\\n}\\n\\ntype ProductItemProps = {\\n product: Product\\n}\\n\\nfunction ProductItem({ product }: ProductItemProps) {\\n return (\\n

\\n

{product.name}

\\n

${product.price}

\\n

\\n )\\n}\\n\\nexport function ProductList({ products }: { products: Product[] }) {\\n return (\\n

\\n {products.map((product) => (\\n \\n ))}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c9062eed-45a8-4c0d-9f10-6fb52d3348e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"8e90e0a1-bd98-43b0-a8db-3e6860a5f9f1","type":"procode","props":{"code":"Separate item component makes list easier to optimize.\n","language":"txt","filename":"","files":"[{\"id\":\"9rfmk9ght\",\"name\":\"code\",\"code\":\"Separate item component makes list easier to optimize.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af242744-f583-4036-8cb9-6d66b98ae10d","type":"divider","props":{},"children":[]},{"id":"b88ac44b-fb0a-4ab1-85ca-1659f94566da","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Empty List State","styles":{}}],"children":[]},{"id":"f7c32266-9f5b-4203-bac7-f2fa0b1f5814","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Always handle empty list.","styles":{}}],"children":[]},{"id":"4782b38b-b3c4-41cb-99f6-9ebb54395282","type":"procode","props":{"code":"if (products.length === 0) {\n return

No products found.

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"lka9k2g3w\",\"name\":\"code\",\"code\":\"if (products.length === 0) {\\n return

No products found.

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"55935bde-2bbd-43f0-8340-00e534a05f33","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Full example:","styles":{}}],"children":[]},{"id":"c5ef9a4f-cb40-406e-9d7b-8a76483366a3","type":"procode","props":{"code":"export function ProductList({ products }: { products: Product[] }) {\n if (products.length === 0) {\n return

No products found.

\n }\n\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"4viwf8hvf\",\"name\":\"code\",\"code\":\"export function ProductList({ products }: { products: Product[] }) {\\n if (products.length === 0) {\\n return

No products found.

\\n }\\n\\n return (\\n

\\n {products.map((product) => (\\n \\n ))}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"621d9915-cdff-4b9f-9896-6d3cb30a005e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4319a18b-79ee-4f2f-9844-8a9cfe583616","type":"procode","props":{"code":"Empty state improves user experience.\n","language":"txt","filename":"","files":"[{\"id\":\"umlrp2ml0\",\"name\":\"code\",\"code\":\"Empty state improves user experience.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07812bd6-b3f7-4ce5-8980-b6fddc4532df","type":"divider","props":{},"children":[]},{"id":"aea53235-a879-48ba-b177-b6f5f0d0d0e7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Loading List State","styles":{}}],"children":[]},{"id":"56310c30-f954-47be-adc5-57211f7c5d67","type":"procode","props":{"code":"if (loading) {\n return

Loading products...

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ucs8s0khv\",\"name\":\"code\",\"code\":\"if (loading) {\\n return

Loading products...

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"35a49975-4532-45dd-80c8-e625bb6463a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a2a5a2e0-d29a-4605-a01b-6c04560bf5d0","type":"procode","props":{"code":"Show loading when list data is not ready.\n","language":"txt","filename":"","files":"[{\"id\":\"zxdnd7i9h\",\"name\":\"code\",\"code\":\"Show loading when list data is not ready.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"edb3525f-d827-4c96-a006-fe529b3ace7d","type":"divider","props":{},"children":[]},{"id":"68ff8aa2-33c3-4209-b8fb-e45dea602d90","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Error List State","styles":{}}],"children":[]},{"id":"15fd17ed-a84c-4f13-912a-c768386f43fa","type":"procode","props":{"code":"if (error) {\n return

Failed to load products.

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"rzy47xlfb\",\"name\":\"code\",\"code\":\"if (error) {\\n return

Failed to load products.

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6012bfd2-795d-4ae0-a26b-31259995b16e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3c137318-3556-4c27-8eb4-377c643ce404","type":"procode","props":{"code":"Show error message when list request fails.\n","language":"txt","filename":"","files":"[{\"id\":\"c41bnl5wq\",\"name\":\"code\",\"code\":\"Show error message when list request fails.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"306f0260-ffa1-4361-8252-13b36cafcb98","type":"divider","props":{},"children":[]},{"id":"e107f00c-04e6-46e4-87b0-07a0a534ca6f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional List Rendering Pattern","styles":{}}],"children":[]},{"id":"70117d4e-d3f8-467b-9f1e-a267f1c47f38","type":"procode","props":{"code":"type Product = {\n id: number\n name: string\n price: number\n}\n\ntype ProductListProps = {\n products: Product[]\n loading: boolean\n error: string\n}\n\nfunction ProductItem({ product }: { product: Product }) {\n return (\n

{product.name}

${product.price}

\n )\n}\n\nexport function ProductList({\n products,\n loading,\n error,\n}: ProductListProps) {\n if (loading) {\n return

Loading products...

\n }\n\n if (error) {\n return

{error}

\n }\n\n if (products.length === 0) {\n return

No products found.

\n }\n\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"vvjvqbrjy\",\"name\":\"code\",\"code\":\"type Product = {\\n id: number\\n name: string\\n price: number\\n}\\n\\ntype ProductListProps = {\\n products: Product[]\\n loading: boolean\\n error: string\\n}\\n\\nfunction ProductItem({ product }: { product: Product }) {\\n return (\\n

\\n

{product.name}

\\n

${product.price}

\\n

\\n )\\n}\\n\\nexport function ProductList({\\n products,\\n loading,\\n error,\\n}: ProductListProps) {\\n if (loading) {\\n return

Loading products...

\\n }\\n\\n if (error) {\\n return

{error}

\\n }\\n\\n if (products.length === 0) {\\n return

No products found.

\\n }\\n\\n return (\\n

\\n {products.map((product) => (\\n \\n ))}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"789c9bf2-ef34-4c2e-ae42-1f1298345f7a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"97612f18-e034-482b-b002-7bf412634628","type":"procode","props":{"code":"List component\n├── checks loading\n├── checks error\n├── checks empty data\n├── maps data\n└── renders item component\n","language":"txt","filename":"","files":"[{\"id\":\"u96tggpkw\",\"name\":\"code\",\"code\":\"List component\\n├── checks loading\\n├── checks error\\n├── checks empty data\\n├── maps data\\n└── renders item component\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30f8991c-a146-4924-a0b4-1b5ca4f61100","type":"divider","props":{},"children":[]},{"id":"084f4e61-a0df-4f89-b439-3a9fb9b9ab35","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Should You Optimize Lists?","styles":{}}],"children":[]},{"id":"39536b92-d210-4b32-b4aa-cdda9036750c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Optimize lists when:","styles":{}}],"children":[]},{"id":"7bed6ee7-b12a-41db-8e74-8d6d9de15ad8","type":"procode","props":{"code":"List has many items\nList feels slow\nScrolling feels laggy\nSearch/filter is slow\nList item is complex\nEvery update re-renders many items\nUser sees delay when typing\nBrowser becomes heavy\n","language":"txt","filename":"","files":"[{\"id\":\"wgev3iomn\",\"name\":\"code\",\"code\":\"List has many items\\nList feels slow\\nScrolling feels laggy\\nSearch/filter is slow\\nList item is complex\\nEvery update re-renders many items\\nUser sees delay when typing\\nBrowser becomes heavy\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4f68a2ba-e2b5-4004-9014-09831785f8ac","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3a1f8a6d-54a8-4b98-87c4-b9da1981d4cf","type":"procode","props":{"code":"Optimize when there is a real performance problem.\n","language":"txt","filename":"","files":"[{\"id\":\"am4wbyo6r\",\"name\":\"code\",\"code\":\"Optimize when there is a real performance problem.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af4a9fb4-4555-4933-ab37-e459a41f9159","type":"divider","props":{},"children":[]},{"id":"b101cc2a-efa7-4215-8d7a-c9c1119127f0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Not to Optimize Lists?","styles":{}}],"children":[]},{"id":"6644a7a5-4442-4faf-9c7d-7014efe2aab6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not over-optimize small lists.","styles":{}}],"children":[]},{"id":"128fb64d-088e-4989-b64a-73fd07e78fc7","type":"procode","props":{"code":"Small list\n├── 5 items\n├── 10 items\n├── 20 items\n└── normal map is fine\n","language":"txt","filename":"","files":"[{\"id\":\"mbn758v43\",\"name\":\"code\",\"code\":\"Small list\\n├── 5 items\\n├── 10 items\\n├── 20 items\\n└── normal map is fine\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc5016f6-52ba-4ee3-81d3-cb8e7c818774","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f495e922-e24e-4763-9a71-c65036fd12d6","type":"procode","props":{"code":"Do not add memo, virtualization, and complex logic too early.\n","language":"txt","filename":"","files":"[{\"id\":\"m9r334w1k\",\"name\":\"code\",\"code\":\"Do not add memo, virtualization, and complex logic too early.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b72db1ea-e845-449f-946f-495e36916c4f","type":"divider","props":{},"children":[]},{"id":"6d0cf4c7-f7b6-4674-82c6-1826e6b5ad7c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"15cf61ae-6337-4b55-8105-570955e7a576","type":"procode","props":{"code":"Mistake 1: Using index as key\nMistake 2: Using Math.random() as key\nMistake 3: Rendering thousands of items at once\nMistake 4: Filtering large list on every render\nMistake 5: Doing heavy calculation inside map\nMistake 6: Not using pagination\nMistake 7: Not using virtualization for huge lists\nMistake 8: Memoizing everything too early\nMistake 9: Passing unstable props to memoized item\nMistake 10: Not handling loading, error, and empty states\n","language":"txt","filename":"","files":"[{\"id\":\"2vse5b5u6\",\"name\":\"code\",\"code\":\"Mistake 1: Using index as key\\nMistake 2: Using Math.random() as key\\nMistake 3: Rendering thousands of items at once\\nMistake 4: Filtering large list on every render\\nMistake 5: Doing heavy calculation inside map\\nMistake 6: Not using pagination\\nMistake 7: Not using virtualization for huge lists\\nMistake 8: Memoizing everything too early\\nMistake 9: Passing unstable props to memoized item\\nMistake 10: Not handling loading, error, and empty states\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a5c4ff23-d17e-4275-a97b-305662a9fa17","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"08e06851-428a-45f0-a18f-654ad1ac7446","type":"procode","props":{"code":"Use stable id as key.\nRender only needed items.\nUse pagination for large data.\nUse virtualization for huge lists.\nUse useMemo for expensive filtering.\nUse React.memo for expensive item components.\nUse backend pagination for very large data.\n","language":"txt","filename":"","files":"[{\"id\":\"1rdy0046v\",\"name\":\"code\",\"code\":\"Use stable id as key.\\nRender only needed items.\\nUse pagination for large data.\\nUse virtualization for huge lists.\\nUse useMemo for expensive filtering.\\nUse React.memo for expensive item components.\\nUse backend pagination for very large data.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a85e2f21-7649-40a4-bd77-1d473d7f11a8","type":"divider","props":{},"children":[]},{"id":"119cbce9-d4fa-4a73-8be5-dfe1d5535c95","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"976d28a5-3dbb-4576-bc25-6a6326b12a7c","type":"procode","props":{"code":"Professional List Optimization Pattern\n├── Use stable unique key\n├── Avoid index key when list can change\n├── Separate item component\n├── Handle loading state\n├── Handle error state\n├── Handle empty state\n├── Use pagination for large lists\n├── Use infinite scroll when suitable\n├── Use virtualization for huge lists\n├── Use useMemo for expensive filtering\n├── Use React.memo for expensive list items\n├── Use useCallback for stable item actions\n├── Avoid heavy logic inside map\n├── Use backend pagination for large database data\n└── Optimize only when needed\n","language":"txt","filename":"","files":"[{\"id\":\"gi2aged19\",\"name\":\"code\",\"code\":\"Professional List Optimization Pattern\\n├── Use stable unique key\\n├── Avoid index key when list can change\\n├── Separate item component\\n├── Handle loading state\\n├── Handle error state\\n├── Handle empty state\\n├── Use pagination for large lists\\n├── Use infinite scroll when suitable\\n├── Use virtualization for huge lists\\n├── Use useMemo for expensive filtering\\n├── Use React.memo for expensive list items\\n├── Use useCallback for stable item actions\\n├── Avoid heavy logic inside map\\n├── Use backend pagination for large database data\\n└── Optimize only when needed\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d398e36-fbd3-47b5-8538-c74e244d56ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended structure:","styles":{}}],"children":[]},{"id":"87fa822e-92ee-4e69-94f4-2fccb84e3e30","type":"procode","props":{"code":"src/\n└── features/\n └── products/\n ├── components/\n │ ├── ProductList.tsx\n │ └── ProductItem.tsx\n ├── hooks/\n │ └── useProducts.ts\n ├── services/\n │ └── product-service.ts\n └── types/\n └── product-type.ts\n","language":"txt","filename":"","files":"[{\"id\":\"kinb0gk0b\",\"name\":\"code\",\"code\":\"src/\\n└── features/\\n └── products/\\n ├── components/\\n │ ├── ProductList.tsx\\n │ └── ProductItem.tsx\\n ├── hooks/\\n │ └── useProducts.ts\\n ├── services/\\n │ └── product-service.ts\\n └── types/\\n └── product-type.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"48e6629a-5b18-4da1-bc38-aeb82096b19d","type":"divider","props":{},"children":[]},{"id":"d26e001c-22ec-4799-9ece-db932b7fe94a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"6976e332-b17f-4c70-a523-db6c7c02d1da","type":"procode","props":{"code":"List Optimization = reduce unnecessary rendering work\n","language":"txt","filename":"","files":"[{\"id\":\"xam7hgfvo\",\"name\":\"code\",\"code\":\"List Optimization = reduce unnecessary rendering work\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2c0aba5b-fa20-4201-920d-ad30718b7ddd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"32f1b4e8-c80f-4b07-9217-5de344dca41e","type":"procode","props":{"code":"React list performance depends on:\n├── how many items are rendered\n├── how often items re-render\n├── how heavy each item is\n└── how expensive filtering/sorting is\n","language":"txt","filename":"","files":"[{\"id\":\"pspt1xzh2\",\"name\":\"code\",\"code\":\"React list performance depends on:\\n├── how many items are rendered\\n├── how often items re-render\\n├── how heavy each item is\\n└── how expensive filtering/sorting is\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e1996e0-cfe3-4b6a-baef-947bebdccb31","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"e3a64c91-7712-4c57-b4e8-18a8f511277d","type":"procode","props":{"code":"Optimize list\n├── use correct key\n├── render fewer items\n├── memoize expensive calculation\n├── memoize expensive item\n├── paginate or virtualize\n└── keep UI smooth\n","language":"txt","filename":"","files":"[{\"id\":\"7oz7db3q7\",\"name\":\"code\",\"code\":\"Optimize list\\n├── use correct key\\n├── render fewer items\\n├── memoize expensive calculation\\n├── memoize expensive item\\n├── paginate or virtualize\\n└── keep UI smooth\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7dab78b-c088-47a2-86da-626e339b1965","type":"divider","props":{},"children":[]},{"id":"5a49aece-6659-4eb8-892c-ab99e2d5c8be","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"57412064-a4d6-4dc7-b01e-7bf98d7e1743","type":"procode","props":{"code":"List Optimization\n├── Makes large lists faster\n├── Prevents unnecessary re-renders\n├── Uses stable keys\n├── Avoids index keys when list changes\n├── Uses pagination\n├── Uses infinite scroll\n├── Uses virtualization\n├── Uses React.memo\n├── Uses useMemo\n├── Uses useCallback when needed\n├── Avoids heavy logic inside map\n├── Handles loading state\n├── Handles error state\n├── Handles empty state\n└── Should be used when list performance becomes a problem\n","language":"txt","filename":"","files":"[{\"id\":\"tjqtu952d\",\"name\":\"code\",\"code\":\"List Optimization\\n├── Makes large lists faster\\n├── Prevents unnecessary re-renders\\n├── Uses stable keys\\n├── Avoids index keys when list changes\\n├── Uses pagination\\n├── Uses infinite scroll\\n├── Uses virtualization\\n├── Uses React.memo\\n├── Uses useMemo\\n├── Uses useCallback when needed\\n├── Avoids heavy logic inside map\\n├── Handles loading state\\n├── Handles error state\\n├── Handles empty state\\n└── Should be used when list performance becomes a problem\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"377e5ac6-0da3-4203-8056-a6a558a71d90","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"List Optimization","styles":{"code":true}},{"type":"text","text":" is important because large lists can make React apps slow. The professional rule is simple: ","styles":{}},{"type":"text","text":"use stable keys, render only what the user needs, and optimize only when the list actually becomes heavy.","styles":{"bold":true}}],"children":[]},{"id":"e8dce193-637f-4344-b6c9-8bd7e3e56edd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]