[{"id":"d73d2285-1873-46e4-bedf-97e35bd37317","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common useEffect Mistakes","styles":{}}],"children":[]},{"id":"6f4f9f9f-506b-400e-9597-783e707089e5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common useEffect Mistakes","styles":{"bold":true}},{"type":"text","text":" are errors that happen when ","styles":{}},{"type":"text","text":"useEffect","styles":{"code":true}},{"type":"text","text":" is used for the wrong purpose, with wrong dependencies, without cleanup, or with unnecessary state updates.","styles":{}}],"children":[]},{"id":"683eaf33-4cb7-49e6-955a-faa0a1693722","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"95199aea-a4a8-4306-a246-98db19568eae","type":"procode","props":{"code":"Common useEffect Mistakes = wrong ways of using useEffect\n","language":"txt","filename":"","files":"[{\"id\":\"ixurj119j\",\"name\":\"code\",\"code\":\"Common useEffect Mistakes = wrong ways of using useEffect\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ef222f1a-2466-4f08-a9c7-1e1e48c20388","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React officially describes ","styles":{}},{"type":"text","text":"useEffect","styles":{"code":true}},{"type":"text","text":" as a Hook for synchronizing a component with an external system. If you are not connecting to an external system, React says you probably do not need an Effect.","styles":{}}],"children":[]},{"id":"b8fcf986-65ac-4b51-92ae-258d1e1d5860","type":"divider","props":{},"children":[]},{"id":"5d1e9fa2-ac5f-467b-b668-e98c039bd125","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"face0983-35ee-44aa-815d-28600fd5f1e9","type":"procode","props":{"code":"Common useEffect Mistakes\n├── Using useEffect for everything\n├── Using useEffect for derived state\n├── Forgetting dependency array\n├── Missing dependencies\n├── Adding wrong dependencies\n├── Creating infinite loop\n├── Forgeting cleanup function\n├── Fetching data without cleanup\n├── Putting event logic inside useEffect\n├── Ignoring Strict Mode behavior\n└── Making effects too large\n","language":"txt","filename":"","files":"[{\"id\":\"lqhia34va\",\"name\":\"code\",\"code\":\"Common useEffect Mistakes\\n├── Using useEffect for everything\\n├── Using useEffect for derived state\\n├── Forgetting dependency array\\n├── Missing dependencies\\n├── Adding wrong dependencies\\n├── Creating infinite loop\\n├── Forgeting cleanup function\\n├── Fetching data without cleanup\\n├── Putting event logic inside useEffect\\n├── Ignoring Strict Mode behavior\\n└── Making effects too large\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0ccf309c-377d-41fe-92d7-e326de010433","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a097e7d6-5ffc-484b-a9f5-dcaf6acb32c3","type":"procode","props":{"code":"useEffect is for side effects,\nnot for every logic in React.\n","language":"txt","filename":"","files":"[{\"id\":\"e886h3vdl\",\"name\":\"code\",\"code\":\"useEffect is for side effects,\\nnot for every logic in React.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eca09078-9260-47e2-82eb-97e6173ced78","type":"divider","props":{},"children":[]},{"id":"b0dc4a4d-5ec9-49df-94aa-d2130aa75a82","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 1: Using useEffect for Everything","styles":{}}],"children":[]},{"id":"b7cf6fb1-4818-41fa-8b98-76e4abda84db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"70dcd35f-fc83-4344-a82d-724566b51fd1","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport default function FullName() {\n const [firstName, setFirstName] = useState(\"Farid\")\n const [lastName, setLastName] = useState(\"Azhari\")\n const [fullName, setFullName] = useState(\"\")\n\n useEffect(() => {\n setFullName(`${firstName} ${lastName}`)\n }, [firstName, lastName])\n\n return

{fullName}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"z26yzz4s4\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport default function FullName() {\\n const [firstName, setFirstName] = useState(\\\"Farid\\\")\\n const [lastName, setLastName] = useState(\\\"Azhari\\\")\\n const [fullName, setFullName] = useState(\\\"\\\")\\n\\n useEffect(() => {\\n setFullName(`${firstName} ${lastName}`)\\n }, [firstName, lastName])\\n\\n return

{fullName}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bccad8ae-c423-4f69-882e-ce724affc251","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"380147df-1403-43da-ba44-1525d9e72a2f","type":"procode","props":{"code":"fullName can be calculated directly.\nNo external system is involved.\n","language":"txt","filename":"","files":"[{\"id\":\"6w9vmzbbx\",\"name\":\"code\",\"code\":\"fullName can be calculated directly.\\nNo external system is involved.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc004623-8135-4c8a-99d3-66a1baced79b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"1929b75d-fb72-43e7-81be-3e5d1edb415f","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function FullName() {\n const [firstName, setFirstName] = useState(\"Farid\")\n const [lastName, setLastName] = useState(\"Azhari\")\n\n const fullName = `${firstName} ${lastName}`\n\n return

{fullName}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"k87tetpy8\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function FullName() {\\n const [firstName, setFirstName] = useState(\\\"Farid\\\")\\n const [lastName, setLastName] = useState(\\\"Azhari\\\")\\n\\n const fullName = `${firstName} ${lastName}`\\n\\n return

{fullName}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"173c0afb-bdba-4290-a50d-5bb3326903ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2a6bbb29-c431-448f-9b9f-863986b00f65","type":"procode","props":{"code":"If you can calculate it during render,\ndo not use useEffect.\n","language":"txt","filename":"","files":"[{\"id\":\"yt6wby1qx\",\"name\":\"code\",\"code\":\"If you can calculate it during render,\\ndo not use useEffect.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bccb897e-1986-4294-988c-5f9f68bf3320","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s “You Might Not Need an Effect” guide explains that Effects are unnecessary when you only transform data for rendering; calculating the value during render is usually simpler and avoids extra renders.","styles":{}}],"children":[]},{"id":"7c4289ae-fa76-4717-9bb7-a4f799a64869","type":"divider","props":{},"children":[]},{"id":"07fa27cb-3830-4f66-a7ec-a2000c8ad019","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 2: Derived State in useEffect","styles":{}}],"children":[]},{"id":"b75092ac-bdb0-46e2-b7e9-3849d2df7487","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Derived state","styles":{"bold":true}},{"type":"text","text":" means state that can be calculated from other state or props.","styles":{}}],"children":[]},{"id":"16b1dc43-678b-4b82-823b-a407d73d9b79","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"1eaecb64-7c6c-4632-9af7-6396b11f1ad9","type":"procode","props":{"code":"const [price, setPrice] = useState(100)\nconst [quantity, setQuantity] = useState(2)\nconst [total, setTotal] = useState(0)\n\nuseEffect(() => {\n setTotal(price * quantity)\n}, [price, quantity])\n","language":"tsx","filename":"","files":"[{\"id\":\"bby7e5eyk\",\"name\":\"code\",\"code\":\"const [price, setPrice] = useState(100)\\nconst [quantity, setQuantity] = useState(2)\\nconst [total, setTotal] = useState(0)\\n\\nuseEffect(() => {\\n setTotal(price * quantity)\\n}, [price, quantity])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d662f743-96c0-4613-8a1a-70f7a5bf85b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"f788b574-e665-4cca-ab28-9e29e6b0ea6c","type":"procode","props":{"code":"const [price, setPrice] = useState(100)\nconst [quantity, setQuantity] = useState(2)\n\nconst total = price * quantity\n","language":"tsx","filename":"","files":"[{\"id\":\"j8wnxhjmq\",\"name\":\"code\",\"code\":\"const [price, setPrice] = useState(100)\\nconst [quantity, setQuantity] = useState(2)\\n\\nconst total = price * quantity\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2b9ec96b-138a-4fde-9ae9-d9c6ed7feaa4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1aa08708-45fd-4fc2-a023-5a335d972f70","type":"procode","props":{"code":"Do not store what you can calculate.\n","language":"txt","filename":"","files":"[{\"id\":\"sbju7xbb3\",\"name\":\"code\",\"code\":\"Do not store what you can calculate.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e65aa261-24ef-4d4c-a465-24b705ebb37f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad pattern:","styles":{}}],"children":[]},{"id":"dd6d8d66-7609-4fff-952f-a63e4574d96b","type":"procode","props":{"code":"state A + state B\n└── useEffect creates state C\n","language":"txt","filename":"","files":"[{\"id\":\"6agjjtkvh\",\"name\":\"code\",\"code\":\"state A + state B\\n└── useEffect creates state C\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a7757474-3c7e-4ead-8dd2-658db48064de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better pattern:","styles":{}}],"children":[]},{"id":"9b4b71e0-fa50-4b03-a356-ecb0b6a735ea","type":"procode","props":{"code":"state A + state B\n└── calculate value directly\n","language":"txt","filename":"","files":"[{\"id\":\"7ezmj1dnf\",\"name\":\"code\",\"code\":\"state A + state B\\n└── calculate value directly\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aab7c897-8868-4645-a333-876a8ab3e582","type":"divider","props":{},"children":[]},{"id":"2bfad277-3ad3-40e1-94a7-d7035da1b7d5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 3: Forgetting Dependency Array","styles":{}}],"children":[]},{"id":"9805518a-46df-4625-b53f-e7cf34f818e9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"93eb77b4-0f75-44b0-917b-0f932656152f","type":"procode","props":{"code":"useEffect(() => {\n console.log(\"Effect runs\")\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"0ai4rim3u\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n console.log(\\\"Effect runs\\\")\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a99c33e5-7dc5-46c3-911d-4986ec2b4c52","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"1f769664-3b3f-47bd-8f76-231d75685e84","type":"procode","props":{"code":"No dependency array\n└── effect runs after every render\n","language":"txt","filename":"","files":"[{\"id\":\"v283q8xex\",\"name\":\"code\",\"code\":\"No dependency array\\n└── effect runs after every render\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"76e60d15-cb0e-49ba-8c9f-8ef5a5321e35","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This can be okay sometimes, but often it is accidental.","styles":{}}],"children":[]},{"id":"971419c4-e6cc-4b00-8b53-9c9b4006d9b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"eeb8ea41-f219-4c8c-b2cf-489d7409a0fe","type":"procode","props":{"code":"useEffect(() => {\n console.log(\"Component mounted\")\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"buanaa2ii\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n console.log(\\\"Component mounted\\\")\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1089cd24-db94-4d1b-9554-18ff8eedb579","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Or:","styles":{}}],"children":[]},{"id":"96ee9fb0-7826-4c6b-a9b7-a5c0e9bbd2b2","type":"procode","props":{"code":"useEffect(() => {\n console.log(\"Count changed:\", count)\n}, [count])\n","language":"tsx","filename":"","files":"[{\"id\":\"hiteqpezm\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n console.log(\\\"Count changed:\\\", count)\\n}, [count])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ac41f516-1534-46f7-b6e0-64d9c0f9339a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4134a153-1f86-43bb-8057-0cb669f2fc3e","type":"procode","props":{"code":"No array → every render\n[] → once after mount\n[count] → when count changes\n","language":"txt","filename":"","files":"[{\"id\":\"ct5j19sh0\",\"name\":\"code\",\"code\":\"No array → every render\\n[] → once after mount\\n[count] → when count changes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0d317f5c-6708-4dd7-b96f-b48cfb621a2a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs explain that if the dependency argument is omitted, the Effect re-runs after every component commit.","styles":{}}],"children":[]},{"id":"5305429c-7e30-46a9-88f3-a236855dc941","type":"divider","props":{},"children":[]},{"id":"93f2280a-59fe-430f-9887-5bcd35382529","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 4: Missing Dependencies","styles":{}}],"children":[]},{"id":"73741a42-8c36-4fda-a56f-9239a15846fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"8962ce61-a709-4d10-b642-f1d3d22b0f95","type":"procode","props":{"code":"type ProductDetailProps = {\n productId: number\n}\n\nexport function ProductDetail({ productId }: ProductDetailProps) {\n useEffect(() => {\n fetch(`/api/products/${productId}`)\n }, [])\n\n return

Product detail

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"wsljpgwzh\",\"name\":\"code\",\"code\":\"type ProductDetailProps = {\\n productId: number\\n}\\n\\nexport function ProductDetail({ productId }: ProductDetailProps) {\\n useEffect(() => {\\n fetch(`/api/products/${productId}`)\\n }, [])\\n\\n return

Product detail

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da716946-1cc9-4f2c-bc0b-2b7deeb3b6f8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"a1954cb3-45e8-4ecf-89d5-e33ae52bd4eb","type":"procode","props":{"code":"productId is used inside useEffect,\nbut it is missing from dependency array.\n","language":"txt","filename":"","files":"[{\"id\":\"9hbxkru1t\",\"name\":\"code\",\"code\":\"productId is used inside useEffect,\\nbut it is missing from dependency array.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8886d564-19f5-437d-b4f7-4cbee50485c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"0c94c9cb-79f4-431b-b133-c59e473b3be3","type":"procode","props":{"code":"type ProductDetailProps = {\n productId: number\n}\n\nexport function ProductDetail({ productId }: ProductDetailProps) {\n useEffect(() => {\n fetch(`/api/products/${productId}`)\n }, [productId])\n\n return

Product detail

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"wk9v11f33\",\"name\":\"code\",\"code\":\"type ProductDetailProps = {\\n productId: number\\n}\\n\\nexport function ProductDetail({ productId }: ProductDetailProps) {\\n useEffect(() => {\\n fetch(`/api/products/${productId}`)\\n }, [productId])\\n\\n return

Product detail

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"068fa601-c299-4201-808b-fbdff4aef921","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f41c9e7b-99d6-447b-94b6-775bbf59729a","type":"procode","props":{"code":"If effect uses a reactive value,\nput it in the dependency array.\n","language":"txt","filename":"","files":"[{\"id\":\"x61mfc96s\",\"name\":\"code\",\"code\":\"If effect uses a reactive value,\\nput it in the dependency array.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6c21732d-15c0-490d-a4fe-e30bc8f7a0ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs say dependencies should include all reactive values referenced inside the Effect, including props, state, and variables or functions declared inside the component.","styles":{}}],"children":[]},{"id":"136929ff-dfbc-4bd7-b2c0-52d6e2c015ad","type":"divider","props":{},"children":[]},{"id":"e666be2d-b9ad-47c7-95fc-20727bf2c249","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 5: Fighting the Dependency Array","styles":{}}],"children":[]},{"id":"b7c590c0-3b16-4619-a46c-ddf24659a20c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"291d8a55-2241-45bf-87b6-8a7d4b2e14b9","type":"procode","props":{"code":"useEffect(() => {\n fetch(`/api/search?query=${query}`)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"8v12e8dxo\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n fetch(`/api/search?query=${query}`)\\n // eslint-disable-next-line react-hooks/exhaustive-deps\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6ac5d97a-0be8-458b-b7ff-d4d0c0663f9a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"55f1db00-0b80-45e0-92f5-45f66534f519","type":"procode","props":{"code":"The effect depends on query,\nbut the dependency warning is hidden.\n","language":"txt","filename":"","files":"[{\"id\":\"ofx98nh3j\",\"name\":\"code\",\"code\":\"The effect depends on query,\\nbut the dependency warning is hidden.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fae21821-8700-4346-87de-f1c07bc60a1b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"b730c5de-46be-4810-b306-f2217c67c1ea","type":"procode","props":{"code":"useEffect(() => {\n fetch(`/api/search?query=${query}`)\n}, [query])\n","language":"tsx","filename":"","files":"[{\"id\":\"jchnnhfd2\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n fetch(`/api/search?query=${query}`)\\n}, [query])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1542cbee-e63b-4211-b178-19469fdcb58b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"67bfb8b2-7def-49bd-b065-bb8ce23be9b3","type":"procode","props":{"code":"Do not hide dependency problems.\nFix the effect instead.\n","language":"txt","filename":"","files":"[{\"id\":\"kfr6icfw3\",\"name\":\"code\",\"code\":\"Do not hide dependency problems.\\nFix the effect instead.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c46c680b-2a4e-4367-896d-d9132d41abd3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If adding a dependency causes a problem, usually the effect structure needs to be improved.","styles":{}}],"children":[]},{"id":"33f51854-32a8-422b-bdbe-338268a05cee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React has a guide specifically for removing unnecessary Effect dependencies instead of suppressing dependency warnings.","styles":{}}],"children":[]},{"id":"cfc48455-44e8-4da2-a2f1-edbd295a448b","type":"divider","props":{},"children":[]},{"id":"6fd70f4d-30bd-4484-a426-d3780bbdb402","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 6: Infinite Loop","styles":{}}],"children":[]},{"id":"ea0d8839-9b80-4d03-b96a-3d2a610c8804","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"a07ebb71-421e-4226-bee0-d454ea3d1b55","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport default function Counter() {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(count + 1)\n }, [count])\n\n return

{count}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"xf0fy7q9d\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport default function Counter() {\\n const [count, setCount] = useState(0)\\n\\n useEffect(() => {\\n setCount(count + 1)\\n }, [count])\\n\\n return

{count}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d27ce522-5e55-4236-a414-a0645e8699ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"1390ca7f-189e-49ce-a52a-4c8319889c77","type":"procode","props":{"code":"count changes\n└── effect runs\n └── setCount changes count\n └── effect runs again\n └── infinite loop\n","language":"txt","filename":"","files":"[{\"id\":\"5xg4sel2t\",\"name\":\"code\",\"code\":\"count changes\\n└── effect runs\\n └── setCount changes count\\n └── effect runs again\\n └── infinite loop\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fb776be2-8165-401e-a91f-68635dcf6df9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"8ef47cbb-bd0d-4192-b8e2-9501f43dfb72","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function Counter() {\n const [count, setCount] = useState(0)\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"2v2bcfw47\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function Counter() {\\n const [count, setCount] = useState(0)\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ecbb5a94-4f60-4a0c-b75a-694175fc746e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ee807927-1762-4ac6-b2fc-abf453f2d7e9","type":"procode","props":{"code":"If user action changes state,\nput it in event handler, not useEffect.\n","language":"txt","filename":"","files":"[{\"id\":\"f2w49dayu\",\"name\":\"code\",\"code\":\"If user action changes state,\\nput it in event handler, not useEffect.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b331c127-a3cf-4931-84de-6a950f31d62a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs include infinite cycles as a common Effect troubleshooting problem.","styles":{}}],"children":[]},{"id":"1fa24ebf-1918-4243-8e2e-06ba4a9e2d2d","type":"divider","props":{},"children":[]},{"id":"62b9cf09-e93f-4102-807d-4c8a90efd5a4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 7: Event Logic Inside useEffect","styles":{}}],"children":[]},{"id":"a23830d4-4269-4b4b-b04c-fa5fb15258af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"5ddf1367-35f9-4038-8c53-74d6e1598239","type":"procode","props":{"code":"const [submitted, setSubmitted] = useState(false)\n\nuseEffect(() => {\n if (submitted) {\n alert(\"Form submitted\")\n }\n}, [submitted])\n\nfunction handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n setSubmitted(true)\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"i6goey447\",\"name\":\"code\",\"code\":\"const [submitted, setSubmitted] = useState(false)\\n\\nuseEffect(() => {\\n if (submitted) {\\n alert(\\\"Form submitted\\\")\\n }\\n}, [submitted])\\n\\nfunction handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n setSubmitted(true)\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"53efd80f-ccfb-48a5-92d9-289f85378540","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"8ac8afbc-11c6-4bf1-8c2d-f0759506972e","type":"procode","props":{"code":"The alert is caused by a form submit event.\nIt should happen in the submit handler.\n","language":"txt","filename":"","files":"[{\"id\":\"cqq9320q3\",\"name\":\"code\",\"code\":\"The alert is caused by a form submit event.\\nIt should happen in the submit handler.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e6833950-b718-4a15-8cef-f2fd3dd7d4f9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"a202df8c-ff46-4ac5-af38-ab216ce50af3","type":"procode","props":{"code":"function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n alert(\"Form submitted\")\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"863zu5y3m\",\"name\":\"code\",\"code\":\"function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n alert(\\\"Form submitted\\\")\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1731c3d1-66b2-4c5e-92d5-c49fde84b8a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"377b20ed-c0a2-4293-adc1-eb7cfafc4753","type":"procode","props":{"code":"User event logic → event handler\nExternal sync logic → useEffect\n","language":"txt","filename":"","files":"[{\"id\":\"vga2vvq7d\",\"name\":\"code\",\"code\":\"User event logic → event handler\\nExternal sync logic → useEffect\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4fe186b-1730-4f11-8875-d07ad35a881a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s “You Might Not Need an Effect” guide explains that event-specific logic usually belongs inside event handlers, not Effects.","styles":{}}],"children":[]},{"id":"7f7b3c29-3290-4a45-8862-e03cff7702e6","type":"divider","props":{},"children":[]},{"id":"40d4b40c-096b-42a8-8a2a-8b5a7b719ffe","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 8: Forgetting Cleanup Function","styles":{}}],"children":[]},{"id":"ef0a2f3e-80ea-4016-a183-b36391803833","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"cc8e6f2a-038d-4980-aef4-7f54767a81bc","type":"procode","props":{"code":"useEffect(() => {\n window.addEventListener(\"resize\", handleResize)\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"owvq4mmdf\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n window.addEventListener(\\\"resize\\\", handleResize)\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78eecda6-1640-4bff-b94a-73a5cd8babb5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"597730c7-035a-40f1-8d6c-3d4690b53308","type":"procode","props":{"code":"Listener is added,\nbut never removed.\n","language":"txt","filename":"","files":"[{\"id\":\"w4zydcn8g\",\"name\":\"code\",\"code\":\"Listener is added,\\nbut never removed.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5346c825-f1a2-494e-8f4f-257c41b81fd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"35dd475b-4c2e-4862-9c01-825361a593a9","type":"procode","props":{"code":"useEffect(() => {\n window.addEventListener(\"resize\", handleResize)\n\n return () => {\n window.removeEventListener(\"resize\", handleResize)\n }\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"bvn9102z5\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n window.addEventListener(\\\"resize\\\", handleResize)\\n\\n return () => {\\n window.removeEventListener(\\\"resize\\\", handleResize)\\n }\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44e28bf8-22db-4d26-9922-9e0d2f41b35b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"58c18646-6761-4167-9d46-a14d9197abc4","type":"procode","props":{"code":"If effect starts something,\ncleanup should stop it.\n","language":"txt","filename":"","files":"[{\"id\":\"p8wqqc7wc\",\"name\":\"code\",\"code\":\"If effect starts something,\\ncleanup should stop it.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d4d772f6-8b2b-4604-aa77-7153a7d43636","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs explain that an Effect setup function may return a cleanup function. React runs cleanup before the Effect runs again with changed dependencies and when the component is removed from the DOM.","styles":{}}],"children":[]},{"id":"12bb3245-3bf4-4116-ac81-3543fe9ff155","type":"divider","props":{},"children":[]},{"id":"d41c25f6-c94b-4d1c-9614-4e45fb4f956d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 9: Timer Without Cleanup","styles":{}}],"children":[]},{"id":"bf3ba71c-0436-4b83-9f4d-ea6e6bd1d8dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"c6152316-8f64-4d03-93e5-c91610436067","type":"procode","props":{"code":"useEffect(() => {\n setInterval(() => {\n console.log(\"Running\")\n }, 1000)\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"2slp6ybh5\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n setInterval(() => {\\n console.log(\\\"Running\\\")\\n }, 1000)\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"49c9ac13-becc-4f8f-906c-a77bfe68ae2c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"e5728bad-af29-46e8-a8cf-748c0ddb968d","type":"procode","props":{"code":"Timer keeps running\neven when component is gone.\n","language":"txt","filename":"","files":"[{\"id\":\"ff5dl9zpk\",\"name\":\"code\",\"code\":\"Timer keeps running\\neven when component is gone.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"99d97c27-897f-4b1a-9e38-96a081b54322","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"bac375ea-2d7e-48e0-9fe2-75cf66007a80","type":"procode","props":{"code":"useEffect(() => {\n const intervalId = window.setInterval(() => {\n console.log(\"Running\")\n }, 1000)\n\n return () => {\n clearInterval(intervalId)\n }\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"w9f0ytf4n\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n const intervalId = window.setInterval(() => {\\n console.log(\\\"Running\\\")\\n }, 1000)\\n\\n return () => {\\n clearInterval(intervalId)\\n }\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"05466e92-516a-466d-859a-859ba2056768","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1e71400b-c698-4f03-830f-5059af97a1a9","type":"procode","props":{"code":"setInterval → clearInterval\naddEventListener → removeEventListener\nconnect → disconnect\nsubscribe → unsubscribe\n","language":"txt","filename":"","files":"[{\"id\":\"yzhyqt6nx\",\"name\":\"code\",\"code\":\"setInterval → clearInterval\\naddEventListener → removeEventListener\\nconnect → disconnect\\nsubscribe → unsubscribe\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"14ed770a-1b18-4152-a553-0990122e9c1d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs list timers, event subscriptions, and third-party APIs as examples of external systems that Effects may synchronize with.","styles":{}}],"children":[]},{"id":"760407c7-c40d-45fa-b9cf-a6d7c87ac394","type":"divider","props":{},"children":[]},{"id":"8d65a898-37a2-40d5-9e7a-366e1c38fe88","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 10: Fetching Data Without Loading and Error State","styles":{}}],"children":[]},{"id":"09f955ae-5473-4885-a49e-418779cdacc7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"b4022805-b3b9-4ffa-a8fe-6f5c49041262","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\ntype User = {\n id: number\n name: string\n}\n\nexport default function UsersPage() {\n const [users, setUsers] = useState([])\n\n useEffect(() => {\n fetch(\"/api/users\")\n .then((response) => response.json())\n .then((data) => setUsers(data))\n }, [])\n\n return (\n

{user.name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"zfim91z47\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\ntype User = {\\n id: number\\n name: string\\n}\\n\\nexport default function UsersPage() {\\n const [users, setUsers] = useState([])\\n\\n useEffect(() => {\\n fetch(\\\"/api/users\\\")\\n .then((response) => response.json())\\n .then((data) => setUsers(data))\\n }, [])\\n\\n return (\\n

{user.name}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b6c1570b-8169-4dc2-8fb6-a7a647e3be53","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"e14c6601-a1d4-4398-a6a7-58bd468f79b1","type":"procode","props":{"code":"No loading state\nNo error state\nNo failed request handling\n","language":"txt","filename":"","files":"[{\"id\":\"ozo0byunp\",\"name\":\"code\",\"code\":\"No loading state\\nNo error state\\nNo failed request handling\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af6a1e20-6b0a-4446-9f6d-ace5af71d7a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"6e6126cd-6fe8-425b-aa6c-2deee2700a35","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\ntype User = {\n id: number\n name: string\n}\n\nexport default function UsersPage() {\n const [users, setUsers] = useState([])\n const [loading, setLoading] = useState(true)\n const [error, setError] = useState(null)\n\n useEffect(() => {\n async function fetchUsers() {\n try {\n setLoading(true)\n setError(null)\n\n const response = await fetch(\"/api/users\")\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch users\")\n }\n\n const data = await response.json()\n setUsers(data)\n } catch {\n setError(\"Something went wrong\")\n } finally {\n setLoading(false)\n }\n }\n\n fetchUsers()\n }, [])\n\n if (loading) {\n return

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

{error}

\n }\n\n return (\n

{user.name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"uzt4vzyoc\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\ntype User = {\\n id: number\\n name: string\\n}\\n\\nexport default function UsersPage() {\\n const [users, setUsers] = useState([])\\n const [loading, setLoading] = useState(true)\\n const [error, setError] = useState(null)\\n\\n useEffect(() => {\\n async function fetchUsers() {\\n try {\\n setLoading(true)\\n setError(null)\\n\\n const response = await fetch(\\\"/api/users\\\")\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch users\\\")\\n }\\n\\n const data = await response.json()\\n setUsers(data)\\n } catch {\\n setError(\\\"Something went wrong\\\")\\n } finally {\\n setLoading(false)\\n }\\n }\\n\\n fetchUsers()\\n }, [])\\n\\n if (loading) {\\n return

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

{error}

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

{user.name}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3c4ba8a8-48dd-4e42-814d-084a40636b54","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"473ef17f-0576-4efb-9b3f-ceb71d931763","type":"procode","props":{"code":"Fetch data\n├── loading\n├── success\n└── error\n","language":"txt","filename":"","files":"[{\"id\":\"fbfwum4hu\",\"name\":\"code\",\"code\":\"Fetch data\\n├── loading\\n├── success\\n└── error\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7dac4f32-3148-4d66-8958-dcc52396cc9a","type":"divider","props":{},"children":[]},{"id":"11d8f4ed-88f4-4592-b907-af1f14d949a7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 11: Race Condition in Fetching","styles":{}}],"children":[]},{"id":"6857a925-e988-419c-a7a6-a67825ddbc68","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"8007b548-4e68-4e67-9d44-157bd2c8de60","type":"procode","props":{"code":"useEffect(() => {\n async function fetchProduct() {\n const response = await fetch(`/api/products/${productId}`)\n const data = await response.json()\n\n setProduct(data)\n }\n\n fetchProduct()\n}, [productId])\n","language":"tsx","filename":"","files":"[{\"id\":\"wxiuu59l7\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n async function fetchProduct() {\\n const response = await fetch(`/api/products/${productId}`)\\n const data = await response.json()\\n\\n setProduct(data)\\n }\\n\\n fetchProduct()\\n}, [productId])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"11564943-a4de-44f1-b739-f5d0a9ccb1b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"532807da-34a5-4a06-8afe-1070e865ea65","type":"procode","props":{"code":"If productId changes quickly,\nolder request may finish after newer request.\n","language":"txt","filename":"","files":"[{\"id\":\"32zevspvl\",\"name\":\"code\",\"code\":\"If productId changes quickly,\\nolder request may finish after newer request.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"180c962a-7e9a-4f6f-8175-cf98c6a747b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"115f877e-5832-45db-8fbd-7f9980305a95","type":"procode","props":{"code":"useEffect(() => {\n let ignore = false\n\n async function fetchProduct() {\n const response = await fetch(`/api/products/${productId}`)\n const data = await response.json()\n\n if (!ignore) {\n setProduct(data)\n }\n }\n\n fetchProduct()\n\n return () => {\n ignore = true\n }\n}, [productId])\n","language":"tsx","filename":"","files":"[{\"id\":\"yrq28rdsq\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n let ignore = false\\n\\n async function fetchProduct() {\\n const response = await fetch(`/api/products/${productId}`)\\n const data = await response.json()\\n\\n if (!ignore) {\\n setProduct(data)\\n }\\n }\\n\\n fetchProduct()\\n\\n return () => {\\n ignore = true\\n }\\n}, [productId])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ff1065e1-2175-48d1-a62b-d15f95f94b7b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9b90714b-9292-45a4-b1b4-abe9320072f6","type":"procode","props":{"code":"Cleanup can ignore outdated request result.\n","language":"txt","filename":"","files":"[{\"id\":\"s8pp6urwz\",\"name\":\"code\",\"code\":\"Cleanup can ignore outdated request result.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c8e7b41-c636-4582-b96d-4ad8cee37fb1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For larger apps, use a data-fetching library like TanStack Query to manage caching, refetching, loading, and race conditions more cleanly.","styles":{}}],"children":[]},{"id":"52caa6dc-8b95-490e-a485-61a0824c5e07","type":"divider","props":{},"children":[]},{"id":"536f11bb-b5cf-4863-b4d1-bf2481e2de4d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 12: Object Dependency Re-created Every Render","styles":{}}],"children":[]},{"id":"772bf2ae-6234-435d-9ee0-61b60dfba38d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"0a43c1c9-26be-4ab9-8a96-b496b81bbde9","type":"procode","props":{"code":"const options = {\n roomId,\n serverUrl,\n}\n\nuseEffect(() => {\n connect(options)\n}, [options])\n","language":"tsx","filename":"","files":"[{\"id\":\"kxu2g8hxc\",\"name\":\"code\",\"code\":\"const options = {\\n roomId,\\n serverUrl,\\n}\\n\\nuseEffect(() => {\\n connect(options)\\n}, [options])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7e1b727-2753-498b-a625-a3ccb1e131fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"d630468b-139d-4bea-b483-1cbab796b56e","type":"procode","props":{"code":"options object is recreated every render.\nEffect may run too often.\n","language":"txt","filename":"","files":"[{\"id\":\"uzpitpwgf\",\"name\":\"code\",\"code\":\"options object is recreated every render.\\nEffect may run too often.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18a3e5fc-7e10-4693-add5-3f417c9d876e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"5e4bcb0b-fd00-4e53-aacd-8d094fe59501","type":"procode","props":{"code":"useEffect(() => {\n const options = {\n roomId,\n serverUrl,\n }\n\n connect(options)\n}, [roomId, serverUrl])\n","language":"tsx","filename":"","files":"[{\"id\":\"xho2a9r9z\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n const options = {\\n roomId,\\n serverUrl,\\n }\\n\\n connect(options)\\n}, [roomId, serverUrl])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"79398c68-8ec8-4097-95b6-9d967365ed72","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b6d41b79-0c4c-4b87-848c-4960739ebd7d","type":"procode","props":{"code":"Create object inside effect\nor depend on primitive values.\n","language":"txt","filename":"","files":"[{\"id\":\"df7pvww8p\",\"name\":\"code\",\"code\":\"Create object inside effect\\nor depend on primitive values.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bff08f94-2bbe-4897-91ec-f32e9bced6a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs warn that objects and functions defined inside the component can cause Effects to re-run more often than needed, and recommend removing unnecessary object and function dependencies.","styles":{}}],"children":[]},{"id":"4f689299-6770-4fe4-8df8-e82bc1a0d966","type":"divider","props":{},"children":[]},{"id":"743ac6df-08b4-41a4-be74-25d7508d2256","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 13: Function Dependency Re-created Every Render","styles":{}}],"children":[]},{"id":"1bf38266-6f1e-466d-9bca-643b1c9541c9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"9252ad11-c322-4674-9547-9e1744e9db7d","type":"procode","props":{"code":"function createOptions() {\n return {\n roomId,\n serverUrl,\n }\n}\n\nuseEffect(() => {\n const options = createOptions()\n connect(options)\n}, [createOptions])\n","language":"tsx","filename":"","files":"[{\"id\":\"fpnltzmt6\",\"name\":\"code\",\"code\":\"function createOptions() {\\n return {\\n roomId,\\n serverUrl,\\n }\\n}\\n\\nuseEffect(() => {\\n const options = createOptions()\\n connect(options)\\n}, [createOptions])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2872feac-74f5-4ab3-adcb-45f348aa4dc0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"e664eb8e-0e52-4040-aac2-e09a28ce8456","type":"procode","props":{"code":"createOptions is recreated every render.\nEffect may run too often.\n","language":"txt","filename":"","files":"[{\"id\":\"xv89yi30t\",\"name\":\"code\",\"code\":\"createOptions is recreated every render.\\nEffect may run too often.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e482e78-8e13-4029-b593-a292ba0038b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"100ec2ba-ceaa-4e19-a5b4-c70442dd73c1","type":"procode","props":{"code":"useEffect(() => {\n function createOptions() {\n return {\n roomId,\n serverUrl,\n }\n }\n\n const options = createOptions()\n connect(options)\n}, [roomId, serverUrl])\n","language":"tsx","filename":"","files":"[{\"id\":\"s49set9dk\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n function createOptions() {\\n return {\\n roomId,\\n serverUrl,\\n }\\n }\\n\\n const options = createOptions()\\n connect(options)\\n}, [roomId, serverUrl])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"00228d78-9b6d-4f31-955c-03dfb70965e9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"dd0e6625-b6eb-4c96-b64c-c5b9bf08862e","type":"procode","props":{"code":"Move effect-only function inside useEffect.\n","language":"txt","filename":"","files":"[{\"id\":\"h0e24ecjy\",\"name\":\"code\",\"code\":\"Move effect-only function inside useEffect.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6c9959ca-80ab-47da-a327-7539f8891170","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another option is ","styles":{}},{"type":"text","text":"useCallback","styles":{"code":true}},{"type":"text","text":", but only use it when truly needed.","styles":{}}],"children":[]},{"id":"4f929d9e-5af8-41f5-9d44-9d50c4738f52","type":"divider","props":{},"children":[]},{"id":"d71c2b5d-5d59-465b-b429-602dabf05dc3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 14: Ignoring Strict Mode Double Run","styles":{}}],"children":[]},{"id":"14b34731-5f50-4fa0-84fa-d3c6908c6e02","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In development, you may see this:","styles":{}}],"children":[]},{"id":"329ac554-20f0-4d8f-84f9-90bca68c3f14","type":"procode","props":{"code":"Effect runs\nCleanup runs\nEffect runs again\n","language":"txt","filename":"","files":"[{\"id\":\"572a6ky5b\",\"name\":\"code\",\"code\":\"Effect runs\\nCleanup runs\\nEffect runs again\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"faa882c9-1952-4a72-87aa-97201f80a8a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Some beginners think this is always a bug.","styles":{}}],"children":[]},{"id":"7acf66dd-47b0-45d6-9c4b-195f2273ccdf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"But in React Strict Mode, this can happen in development to help find cleanup bugs.","styles":{}}],"children":[]},{"id":"a76dbc0e-3d8d-4dd5-aeb1-ff25c7b6db42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad reaction:","styles":{}}],"children":[]},{"id":"862ece0a-ddd4-47ee-af0a-f686cce4d89c","type":"procode","props":{"code":"Remove StrictMode\nor hack with ref to stop effect\n","language":"txt","filename":"","files":"[{\"id\":\"nfx5swy3d\",\"name\":\"code\",\"code\":\"Remove StrictMode\\nor hack with ref to stop effect\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"03b14ff3-5050-4462-82bb-1f7f02bb9363","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better reaction:","styles":{}}],"children":[]},{"id":"27c799c3-b6dd-40ee-8bd4-01bbaf18ca90","type":"procode","props":{"code":"Make cleanup correct.\nEffect should survive setup → cleanup → setup.\n","language":"txt","filename":"","files":"[{\"id\":\"amm6mzzxe\",\"name\":\"code\",\"code\":\"Make cleanup correct.\\nEffect should survive setup → cleanup → setup.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"473a0dfe-c657-4ccd-be19-0a4a13147a60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"f13bb12d-aa8f-4789-8336-e11908f8c019","type":"procode","props":{"code":"useEffect(() => {\n const connection = createConnection()\n\n connection.connect()\n\n return () => {\n connection.disconnect()\n }\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"g5t56u2wb\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n const connection = createConnection()\\n\\n connection.connect()\\n\\n return () => {\\n connection.disconnect()\\n }\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3ded1c2d-a642-4e07-b35c-a23cf846fb4c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"49f66e63-b4e5-41fe-9fb7-01260a2731af","type":"procode","props":{"code":"Strict Mode tests whether your cleanup is correct.\n","language":"txt","filename":"","files":"[{\"id\":\"qyjg6761i\",\"name\":\"code\",\"code\":\"Strict Mode tests whether your cleanup is correct.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7bd63c1e-6d66-4698-b169-a27669ec530e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs explain that Strict Mode may run one extra development-only setup and cleanup cycle before the real setup. The goal is to verify that cleanup mirrors setup.","styles":{}}],"children":[]},{"id":"9e19fd50-5b50-4c9b-9bf5-af2d6d94f25f","type":"divider","props":{},"children":[]},{"id":"0633dbd0-f0a9-41cf-b01a-c80ac7ad4b1c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 15: Using useEffect for Initial State","styles":{}}],"children":[]},{"id":"d3ad7125-48f1-4d07-af46-2706c797862a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"90fcd598-1339-40b0-ae34-08a4239aaa16","type":"procode","props":{"code":"const [theme, setTheme] = useState(\"light\")\n\nuseEffect(() => {\n const savedTheme = localStorage.getItem(\"theme\")\n\n if (savedTheme) {\n setTheme(savedTheme)\n }\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"hnk1knhw8\",\"name\":\"code\",\"code\":\"const [theme, setTheme] = useState(\\\"light\\\")\\n\\nuseEffect(() => {\\n const savedTheme = localStorage.getItem(\\\"theme\\\")\\n\\n if (savedTheme) {\\n setTheme(savedTheme)\\n }\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7197053a-f924-438e-b2b5-305da8c776c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This works, but it can cause a first render with the wrong default value.","styles":{}}],"children":[]},{"id":"27743cc5-4e03-4e4e-82b5-d58ddff47443","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better when suitable:","styles":{}}],"children":[]},{"id":"3f28fc70-2ce0-48e5-aef4-28a4c9d4318e","type":"procode","props":{"code":"const [theme, setTheme] = useState(() => {\n return localStorage.getItem(\"theme\") ?? \"light\"\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"olgjpqd32\",\"name\":\"code\",\"code\":\"const [theme, setTheme] = useState(() => {\\n return localStorage.getItem(\\\"theme\\\") ?? \\\"light\\\"\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93f3800a-cbbd-4d3c-8d87-cdda51ac7d59","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d264d6c0-390e-4e8d-8af6-b910cac3c29f","type":"procode","props":{"code":"If initial state comes from calculation,\nuse lazy initial state.\n","language":"txt","filename":"","files":"[{\"id\":\"frw21vuyz\",\"name\":\"code\",\"code\":\"If initial state comes from calculation,\\nuse lazy initial state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"99b6b3c8-f6fc-47b0-9fd4-f639d2d811f2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"But remember:","styles":{}}],"children":[]},{"id":"4363d46c-90ba-4cca-b256-7d6abb081530","type":"procode","props":{"code":"localStorage only exists in the browser.\n","language":"txt","filename":"","files":"[{\"id\":\"0ss9ciqut\",\"name\":\"code\",\"code\":\"localStorage only exists in the browser.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74efb262-1fab-4f64-86eb-246005b53318","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In plain React Vite apps, this is usually okay. In SSR frameworks, be more careful because browser APIs do not exist on the server.","styles":{}}],"children":[]},{"id":"4fa05250-04d9-421b-940b-51ee84cdddd4","type":"divider","props":{},"children":[]},{"id":"5ccf149f-6bc3-4708-be5c-f50bd5a35a7d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 16: Too Many Responsibilities in One Effect","styles":{}}],"children":[]},{"id":"6ff3a011-2e6f-4625-b1c8-18a6bb8a48a7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"7c578ba7-2337-461f-a479-8fe627276252","type":"procode","props":{"code":"useEffect(() => {\n document.title = title\n\n window.addEventListener(\"resize\", handleResize)\n\n fetch(\"/api/users\")\n .then((response) => response.json())\n .then(setUsers)\n\n return () => {\n window.removeEventListener(\"resize\", handleResize)\n }\n}, [title])\n","language":"tsx","filename":"","files":"[{\"id\":\"f9diwk6fn\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n document.title = title\\n\\n window.addEventListener(\\\"resize\\\", handleResize)\\n\\n fetch(\\\"/api/users\\\")\\n .then((response) => response.json())\\n .then(setUsers)\\n\\n return () => {\\n window.removeEventListener(\\\"resize\\\", handleResize)\\n }\\n}, [title])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"514495b6-9245-4b55-9bbb-a0baef7b1457","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"5ef45aec-0253-4b58-b901-13438e8651ba","type":"procode","props":{"code":"One effect does too many unrelated things.\n","language":"txt","filename":"","files":"[{\"id\":\"6psnwnat4\",\"name\":\"code\",\"code\":\"One effect does too many unrelated things.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"043d4cae-c6ce-44c2-98c3-9a5af342bb38","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"f902f31c-9bed-42ed-b49c-883b5b9d2155","type":"procode","props":{"code":"useEffect(() => {\n document.title = title\n}, [title])\n\nuseEffect(() => {\n window.addEventListener(\"resize\", handleResize)\n\n return () => {\n window.removeEventListener(\"resize\", handleResize)\n }\n}, [])\n\nuseEffect(() => {\n async function fetchUsers() {\n const response = await fetch(\"/api/users\")\n const data = await response.json()\n\n setUsers(data)\n }\n\n fetchUsers()\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"kmven26w8\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n document.title = title\\n}, [title])\\n\\nuseEffect(() => {\\n window.addEventListener(\\\"resize\\\", handleResize)\\n\\n return () => {\\n window.removeEventListener(\\\"resize\\\", handleResize)\\n }\\n}, [])\\n\\nuseEffect(() => {\\n async function fetchUsers() {\\n const response = await fetch(\\\"/api/users\\\")\\n const data = await response.json()\\n\\n setUsers(data)\\n }\\n\\n fetchUsers()\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19ead3f4-0da2-4da3-8361-d2038d7f0e90","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7ef8135f-d092-4015-8391-0e15156ba709","type":"procode","props":{"code":"One effect = one synchronization process.\n","language":"txt","filename":"","files":"[{\"id\":\"o0c665qmd\",\"name\":\"code\",\"code\":\"One effect = one synchronization process.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"02eba5bf-7f62-4b40-9a90-bad728e1666e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs recommend thinking about every Effect as an independent setup and cleanup cycle.","styles":{}}],"children":[]},{"id":"7cd24a97-d79f-49f2-acd3-477aec59009b","type":"divider","props":{},"children":[]},{"id":"4a52f5e8-b969-4b5a-b117-ed0735d8ec91","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 17: Using useEffect Instead of useMemo","styles":{}}],"children":[]},{"id":"017bd703-c57f-4407-9104-e4a8613ce412","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"eccdfe0e-a25b-4bdb-a4fd-eea8461e44dc","type":"procode","props":{"code":"const [filteredProducts, setFilteredProducts] = useState([])\n\nuseEffect(() => {\n setFilteredProducts(\n products.filter((product) =>\n product.name.toLowerCase().includes(search.toLowerCase())\n )\n )\n}, [products, search])\n","language":"tsx","filename":"","files":"[{\"id\":\"3ymjolt29\",\"name\":\"code\",\"code\":\"const [filteredProducts, setFilteredProducts] = useState([])\\n\\nuseEffect(() => {\\n setFilteredProducts(\\n products.filter((product) =>\\n product.name.toLowerCase().includes(search.toLowerCase())\\n )\\n )\\n}, [products, search])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f36adcf1-2053-4b87-998c-ae4b6473d970","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"639a5de0-5f47-474d-b8e4-c77a02e155aa","type":"procode","props":{"code":"const filteredProducts = products.filter((product) =>\n product.name.toLowerCase().includes(search.toLowerCase())\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"bmz5pj3c9\",\"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":"53db19f0-78b5-47cd-af49-4cb6a37afc6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If filtering is expensive:","styles":{}}],"children":[]},{"id":"8eeab404-b10f-4d75-81c6-0dd2adb5d583","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\":\"10wp42gh6\",\"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":"62cbd2db-3afd-4468-b991-ac79ab85cfc1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"09ed44f7-2cc2-4541-8dcb-89f7dc118c25","type":"procode","props":{"code":"Derived data → calculate directly\nExpensive derived data → useMemo\nExternal sync → useEffect\n","language":"txt","filename":"","files":"[{\"id\":\"7e3bgdfao\",\"name\":\"code\",\"code\":\"Derived data → calculate directly\\nExpensive derived data → useMemo\\nExternal sync → useEffect\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8b695a4f-c4b4-47de-b56a-78ff8108d3a0","type":"divider","props":{},"children":[]},{"id":"b861b119-2604-4baf-a0fe-b98a3e798208","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 18: Using useEffect for Prop Change Callback","styles":{}}],"children":[]},{"id":"7b69d912-adb4-49c4-9584-6b889ae52c71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"c80536a1-bd42-42fe-9385-a3665b4f5831","type":"procode","props":{"code":"function ProductCard({ productId, onProductChange }: ProductCardProps) {\n useEffect(() => {\n onProductChange(productId)\n }, [productId, onProductChange])\n\n return

Product {productId}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"qsbuvjcnz\",\"name\":\"code\",\"code\":\"function ProductCard({ productId, onProductChange }: ProductCardProps) {\\n useEffect(() => {\\n onProductChange(productId)\\n }, [productId, onProductChange])\\n\\n return

Product {productId}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6de0f063-a4c1-4d37-a9a1-5d9ec08cffc4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This may be okay in rare cases, but often it creates confusing data flow.","styles":{}}],"children":[]},{"id":"2539b617-94d1-4940-9cbf-89400afdc9a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"05be6222-080b-4f88-a518-87a4b4ed1a91","type":"procode","props":{"code":"function ProductList() {\n function handleSelectProduct(productId: number) {\n // handle product change here\n }\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"jy6bkgkyd\",\"name\":\"code\",\"code\":\"function ProductList() {\\n function handleSelectProduct(productId: number) {\\n // handle product change here\\n }\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"47542b1e-f11e-474c-a8ae-5cdd3d7b62d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5a4a1ba6-b48d-45ec-baa3-b4b1cacb08cf","type":"procode","props":{"code":"If a user action causes it,\nhandle it in the user action.\n","language":"txt","filename":"","files":"[{\"id\":\"dnrwcof7k\",\"name\":\"code\",\"code\":\"If a user action causes it,\\nhandle it in the user action.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30348efa-b501-4292-8749-69a5ffdd1018","type":"divider","props":{},"children":[]},{"id":"ec6193cb-4cd5-440e-a52b-39557941d456","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 19: Async Function Directly as Effect Callback","styles":{}}],"children":[]},{"id":"754ace8d-14de-4d58-a10f-06cb3e7421cc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"4b30ee15-283f-4b17-a121-5d081acefa96","type":"procode","props":{"code":"useEffect(async () => {\n const response = await fetch(\"/api/users\")\n const data = await response.json()\n\n setUsers(data)\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"fuuvrmubr\",\"name\":\"code\",\"code\":\"useEffect(async () => {\\n const response = await fetch(\\\"/api/users\\\")\\n const data = await response.json()\\n\\n setUsers(data)\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bceaf000-9afa-4bb5-8668-52ba76c4d233","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why bad?","styles":{}}],"children":[]},{"id":"773b817b-61fe-4a24-aa0a-1a8490f5aeef","type":"procode","props":{"code":"useEffect callback should return cleanup function or nothing.\nAn async function returns a Promise.\n","language":"txt","filename":"","files":"[{\"id\":\"pm0g9ysd7\",\"name\":\"code\",\"code\":\"useEffect callback should return cleanup function or nothing.\\nAn async function returns a Promise.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b567d890-e494-49c9-b6bf-2d622124a8a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"42146a8c-8872-4e2f-aa41-93cf63a09067","type":"procode","props":{"code":"useEffect(() => {\n async function fetchUsers() {\n const response = await fetch(\"/api/users\")\n const data = await response.json()\n\n setUsers(data)\n }\n\n fetchUsers()\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"nq3fh5l2w\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n async function fetchUsers() {\\n const response = await fetch(\\\"/api/users\\\")\\n const data = await response.json()\\n\\n setUsers(data)\\n }\\n\\n fetchUsers()\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d220b426-8bc3-428f-a762-d35de4302b3b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5d5bde42-d5f5-4bb2-ab84-c878cfc189a9","type":"procode","props":{"code":"Put async function inside useEffect.\nThen call it.\n","language":"txt","filename":"","files":"[{\"id\":\"er5fafhv8\",\"name\":\"code\",\"code\":\"Put async function inside useEffect.\\nThen call it.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a365e7a-79a1-4df6-8a4c-0811ca7b2005","type":"divider","props":{},"children":[]},{"id":"d3f4c082-726a-4d6c-838c-a2d3d9f87fd3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mistake 20: Updating State After Component Unmount","styles":{}}],"children":[]},{"id":"1d7d6cc7-a8f5-49b6-9d56-c3e9259d9789","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"25cfb7c3-5463-4a19-a434-4a29254cf0c5","type":"procode","props":{"code":"useEffect(() => {\n async function fetchUsers() {\n const response = await fetch(\"/api/users\")\n const data = await response.json()\n\n setUsers(data)\n }\n\n fetchUsers()\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"v01kxainn\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n async function fetchUsers() {\\n const response = await fetch(\\\"/api/users\\\")\\n const data = await response.json()\\n\\n setUsers(data)\\n }\\n\\n fetchUsers()\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c650b50-ae61-433e-a584-06c37194a605","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"bbd2c7fd-836c-4041-ad96-6f64da67656c","type":"procode","props":{"code":"If component unmounts before fetch finishes,\nstate update may be outdated.\n","language":"txt","filename":"","files":"[{\"id\":\"owmwznduc\",\"name\":\"code\",\"code\":\"If component unmounts before fetch finishes,\\nstate update may be outdated.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"80d22c28-eb92-47f1-931e-80ebd462e9a4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"f47d7e1a-37ba-48a4-9fc8-62fff74b8091","type":"procode","props":{"code":"useEffect(() => {\n let ignore = false\n\n async function fetchUsers() {\n const response = await fetch(\"/api/users\")\n const data = await response.json()\n\n if (!ignore) {\n setUsers(data)\n }\n }\n\n fetchUsers()\n\n return () => {\n ignore = true\n }\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"ebwrfhpwq\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n let ignore = false\\n\\n async function fetchUsers() {\\n const response = await fetch(\\\"/api/users\\\")\\n const data = await response.json()\\n\\n if (!ignore) {\\n setUsers(data)\\n }\\n }\\n\\n fetchUsers()\\n\\n return () => {\\n ignore = true\\n }\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44001490-7e4c-4dd3-bcf7-1499b19c0b6f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3bd0eb29-3056-4db8-bf04-726451b3cf91","type":"procode","props":{"code":"Cleanup prevents outdated async result from updating state.\n","language":"txt","filename":"","files":"[{\"id\":\"adcg0hlgk\",\"name\":\"code\",\"code\":\"Cleanup prevents outdated async result from updating state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a04a3bdd-2ba2-4404-a122-5cd3f920dadf","type":"divider","props":{},"children":[]},{"id":"e0b09b52-69ec-478c-bded-b7d4f79b84f2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistake List","styles":{}}],"children":[]},{"id":"532f76ee-889a-4ed9-9101-eeef006d1e4d","type":"procode","props":{"code":"Common useEffect Mistakes\n├── Using useEffect when no external system exists\n├── Using useEffect for derived state\n├── Forgetting dependency array\n├── Missing dependencies\n├── Disabling dependency lint rule\n├── Creating infinite loops\n├── Forgetting cleanup\n├── Not cleaning timers\n├── Not removing event listeners\n├── Fetching without loading/error state\n├── Fetching without race-condition handling\n├── Using object dependencies carelessly\n├── Using function dependencies carelessly\n├── Putting event logic inside effects\n├── Using async directly as effect callback\n├── Ignoring Strict Mode double run\n├── Mixing too many things in one effect\n├── Using useEffect instead of useMemo\n└── Using useEffect instead of event handlers\n","language":"txt","filename":"","files":"[{\"id\":\"yxir55y41\",\"name\":\"code\",\"code\":\"Common useEffect Mistakes\\n├── Using useEffect when no external system exists\\n├── Using useEffect for derived state\\n├── Forgetting dependency array\\n├── Missing dependencies\\n├── Disabling dependency lint rule\\n├── Creating infinite loops\\n├── Forgetting cleanup\\n├── Not cleaning timers\\n├── Not removing event listeners\\n├── Fetching without loading/error state\\n├── Fetching without race-condition handling\\n├── Using object dependencies carelessly\\n├── Using function dependencies carelessly\\n├── Putting event logic inside effects\\n├── Using async directly as effect callback\\n├── Ignoring Strict Mode double run\\n├── Mixing too many things in one effect\\n├── Using useEffect instead of useMemo\\n└── Using useEffect instead of event handlers\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d630ec39-1a30-4f67-9b01-48140cfb58db","type":"divider","props":{},"children":[]},{"id":"483e51f7-269f-4d62-a3c2-aea13bfb58db","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Better useEffect Decision Rule","styles":{}}],"children":[]},{"id":"c61106cf-51a7-4722-bb14-f737db460d2a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Before writing ","styles":{}},{"type":"text","text":"useEffect","styles":{"code":true}},{"type":"text","text":", ask:","styles":{}}],"children":[]},{"id":"c1ec14df-2b1c-480d-b04b-fcf7219cdc12","type":"procode","props":{"code":"Question 1:\nAm I synchronizing with something outside React?\n\nQuestion 2:\nIs this caused by rendering, not by one specific event?\n\nQuestion 3:\nDo I need cleanup?\n\nQuestion 4:\nDid I include all dependencies?\n\nQuestion 5:\nCan this be calculated directly instead?\n","language":"txt","filename":"","files":"[{\"id\":\"hndxxam8w\",\"name\":\"code\",\"code\":\"Question 1:\\nAm I synchronizing with something outside React?\\n\\nQuestion 2:\\nIs this caused by rendering, not by one specific event?\\n\\nQuestion 3:\\nDo I need cleanup?\\n\\nQuestion 4:\\nDid I include all dependencies?\\n\\nQuestion 5:\\nCan this be calculated directly instead?\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d6a34a6-f894-4ed8-a1e6-6727767e16da","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"f9ec60ec-2fd5-4e0a-9d39-4a423b3db08b","type":"procode","props":{"code":"External system? Maybe useEffect.\nNo external system? Probably no useEffect.\n","language":"txt","filename":"","files":"[{\"id\":\"qrmqq17mp\",\"name\":\"code\",\"code\":\"External system? Maybe useEffect.\\nNo external system? Probably no useEffect.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bdd2eed6-25aa-4a09-bc87-cd0fb6f7173b","type":"divider","props":{},"children":[]},{"id":"a6cb3221-488a-4119-bbb7-98071d22bc45","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Better Patterns","styles":{}}],"children":[]},{"id":"0995f18d-e3bc-47c4-92c0-8c94b3a5ddc5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Pattern 1: Calculate During Render","styles":{}}],"children":[]},{"id":"2d374d64-d8f6-47aa-8e1e-a24ae0cc5e12","type":"procode","props":{"code":"const total = price * quantity\n","language":"tsx","filename":"","files":"[{\"id\":\"0fm6z7kyw\",\"name\":\"code\",\"code\":\"const total = price * quantity\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"331769f8-e134-462d-8416-8b08c8e958e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"fb64dae3-3038-4606-9365-c07f9a79321b","type":"procode","props":{"code":"fullName\ntotalPrice\nfilteredData\nsortedData\nisValid\ndisplayLabel\n","language":"txt","filename":"","files":"[{\"id\":\"cdcgyiq6r\",\"name\":\"code\",\"code\":\"fullName\\ntotalPrice\\nfilteredData\\nsortedData\\nisValid\\ndisplayLabel\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d01fbc90-f56a-4fc0-8c76-d0f808a3ad88","type":"divider","props":{},"children":[]},{"id":"a960bf6c-a51a-461c-9b5d-c20797d6a0c4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Pattern 2: Event Handler","styles":{}}],"children":[]},{"id":"338c3d71-4990-4bb7-ab39-b9f14e27e8d6","type":"procode","props":{"code":"function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n submitForm()\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"89ud8yxsc\",\"name\":\"code\",\"code\":\"function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n submitForm()\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"718319eb-e703-4cdd-9165-9da0fddfda1a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"3443bf50-367d-4f48-8735-a4af574a090c","type":"procode","props":{"code":"submit\nclick\ndelete\nsave\nlogin\nlogout\nupload\n","language":"txt","filename":"","files":"[{\"id\":\"d3lkutu3m\",\"name\":\"code\",\"code\":\"submit\\nclick\\ndelete\\nsave\\nlogin\\nlogout\\nupload\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b3b2fd67-4467-48bb-b6fa-59d6aca14f88","type":"divider","props":{},"children":[]},{"id":"98949301-202d-4414-a27d-d9e95b30e5d4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Pattern 3: Real Effect","styles":{}}],"children":[]},{"id":"045063f7-72f4-4e32-899d-ee3b9e8c55ab","type":"procode","props":{"code":"useEffect(() => {\n const connection = createConnection(roomId)\n\n connection.connect()\n\n return () => {\n connection.disconnect()\n }\n}, [roomId])\n","language":"tsx","filename":"","files":"[{\"id\":\"tauymoa19\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n const connection = createConnection(roomId)\\n\\n connection.connect()\\n\\n return () => {\\n connection.disconnect()\\n }\\n}, [roomId])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af136303-f439-410b-a30d-a6108648355c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"5d91a068-8a41-4690-a9e0-60ef94117944","type":"procode","props":{"code":"timer\nevent listener\nsubscription\nWebSocket\nbrowser API\nthird-party library\nnetwork connection\n","language":"txt","filename":"","files":"[{\"id\":\"xx4dg6kky\",\"name\":\"code\",\"code\":\"timer\\nevent listener\\nsubscription\\nWebSocket\\nbrowser API\\nthird-party library\\nnetwork connection\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eec498c8-d658-4ba7-b06f-09fa46bd8ed3","type":"divider","props":{},"children":[]},{"id":"28a15e6f-a66e-4251-82c7-ff71c265f85c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"d48944f1-9f64-4716-bd20-5105f65fd91d","type":"procode","props":{"code":"Professional useEffect Pattern\n├── Use useEffect only for side effects\n├── Synchronize with external systems\n├── Keep one responsibility per effect\n├── Include all reactive dependencies\n├── Never ignore dependency warnings carelessly\n├── Add cleanup for listeners, timers, subscriptions, and connections\n├── Avoid derived state in useEffect\n├── Avoid event logic in useEffect\n├── Avoid infinite loops\n├── Avoid unstable object/function dependencies\n├── Use loading and error state for fetch\n├── Handle outdated async results\n├── Extract repeated effect logic into custom hooks\n└── Ask \"Do I really need an Effect?\"\n","language":"txt","filename":"","files":"[{\"id\":\"sgqqmz6bx\",\"name\":\"code\",\"code\":\"Professional useEffect Pattern\\n├── Use useEffect only for side effects\\n├── Synchronize with external systems\\n├── Keep one responsibility per effect\\n├── Include all reactive dependencies\\n├── Never ignore dependency warnings carelessly\\n├── Add cleanup for listeners, timers, subscriptions, and connections\\n├── Avoid derived state in useEffect\\n├── Avoid event logic in useEffect\\n├── Avoid infinite loops\\n├── Avoid unstable object/function dependencies\\n├── Use loading and error state for fetch\\n├── Handle outdated async results\\n├── Extract repeated effect logic into custom hooks\\n└── Ask \\\"Do I really need an Effect?\\\"\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2b0fac05-ddd2-4fa3-abb9-2a595c68879a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good example:","styles":{}}],"children":[]},{"id":"2f974a3e-6931-462b-b805-59683ae9c1cd","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\ntype User = {\n id: number\n name: string\n}\n\nexport default function UsersPage() {\n const [users, setUsers] = useState([])\n const [status, setStatus] = useState<\"idle\" | \"loading\" | \"success\" | \"error\">(\n \"idle\"\n )\n\n useEffect(() => {\n let ignore = false\n\n async function fetchUsers() {\n try {\n setStatus(\"loading\")\n\n const response = await fetch(\"/api/users\")\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch users\")\n }\n\n const data = await response.json()\n\n if (!ignore) {\n setUsers(data)\n setStatus(\"success\")\n }\n } catch {\n if (!ignore) {\n setStatus(\"error\")\n }\n }\n }\n\n fetchUsers()\n\n return () => {\n ignore = true\n }\n }, [])\n\n if (status === \"loading\") {\n return

\n }\n\n if (status === \"error\") {\n return

Failed to load users.

\n }\n\n return (\n

{user.name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"sxzmxunoq\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\ntype User = {\\n id: number\\n name: string\\n}\\n\\nexport default function UsersPage() {\\n const [users, setUsers] = useState([])\\n const [status, setStatus] = useState<\\\"idle\\\" | \\\"loading\\\" | \\\"success\\\" | \\\"error\\\">(\\n \\\"idle\\\"\\n )\\n\\n useEffect(() => {\\n let ignore = false\\n\\n async function fetchUsers() {\\n try {\\n setStatus(\\\"loading\\\")\\n\\n const response = await fetch(\\\"/api/users\\\")\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch users\\\")\\n }\\n\\n const data = await response.json()\\n\\n if (!ignore) {\\n setUsers(data)\\n setStatus(\\\"success\\\")\\n }\\n } catch {\\n if (!ignore) {\\n setStatus(\\\"error\\\")\\n }\\n }\\n }\\n\\n fetchUsers()\\n\\n return () => {\\n ignore = true\\n }\\n }, [])\\n\\n if (status === \\\"loading\\\") {\\n return

\\n }\\n\\n if (status === \\\"error\\\") {\\n return

Failed to load users.

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

{user.name}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0a731cab-5563-4b61-bab3-5ab1d65deea2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"bb135a14-1063-45ce-8e0b-78eb55a4a5d2","type":"procode","props":{"code":"Good effect\n├── has clear purpose\n├── handles loading\n├── handles error\n├── prevents outdated update\n└── has correct dependencies\n","language":"txt","filename":"","files":"[{\"id\":\"5qwwj2mvl\",\"name\":\"code\",\"code\":\"Good effect\\n├── has clear purpose\\n├── handles loading\\n├── handles error\\n├── prevents outdated update\\n└── has correct dependencies\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a65c0b5c-2734-4952-9424-9a1dc140ee63","type":"divider","props":{},"children":[]},{"id":"313f5670-1c84-4835-bdc7-01dbc5822fd4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"184e44d2-7542-446c-9000-9267fe15845b","type":"procode","props":{"code":"useEffect is not for all logic.\nuseEffect is for synchronization.\n","language":"txt","filename":"","files":"[{\"id\":\"7ymp3j3cb\",\"name\":\"code\",\"code\":\"useEffect is not for all logic.\\nuseEffect is for synchronization.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7fda7e22-6449-4068-a024-cb63c2bf533b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"5ec35730-2b71-47d7-ad4a-0ee9558d7450","type":"procode","props":{"code":"Need to calculate UI?\n└── Do it during render\n\nNeed to respond to click?\n└── Do it in event handler\n\nNeed to connect, listen, fetch, sync, or cleanup?\n└── useEffect may be correct\n","language":"txt","filename":"","files":"[{\"id\":\"rcjmu3hw7\",\"name\":\"code\",\"code\":\"Need to calculate UI?\\n└── Do it during render\\n\\nNeed to respond to click?\\n└── Do it in event handler\\n\\nNeed to connect, listen, fetch, sync, or cleanup?\\n└── useEffect may be correct\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d5f604a7-4bce-4a6e-9a42-a811ebb85ce6","type":"divider","props":{},"children":[]},{"id":"baa746b1-9c2d-4683-9f00-a1434a46e41a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"89f231d0-3434-405e-aa67-95fa22a04004","type":"procode","props":{"code":"Common useEffect Mistakes\n├── Using useEffect too much\n├── Using it for derived state\n├── Using it for event logic\n├── Forgetting dependency array\n├── Missing dependencies\n├── Ignoring dependency warning\n├── Creating infinite loops\n├── Forgetting cleanup\n├── Not cleaning timers and listeners\n├── Fetching data without loading/error state\n├── Not handling race conditions\n├── Using unstable object/function dependencies\n├── Mixing many unrelated effects together\n├── Using async directly as effect callback\n└── Forgetting that Strict Mode can run effects twice in development\n","language":"txt","filename":"","files":"[{\"id\":\"vb6ivjb3l\",\"name\":\"code\",\"code\":\"Common useEffect Mistakes\\n├── Using useEffect too much\\n├── Using it for derived state\\n├── Using it for event logic\\n├── Forgetting dependency array\\n├── Missing dependencies\\n├── Ignoring dependency warning\\n├── Creating infinite loops\\n├── Forgetting cleanup\\n├── Not cleaning timers and listeners\\n├── Fetching data without loading/error state\\n├── Not handling race conditions\\n├── Using unstable object/function dependencies\\n├── Mixing many unrelated effects together\\n├── Using async directly as effect callback\\n└── Forgetting that Strict Mode can run effects twice in development\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1b5c8d9-c72f-4237-9dca-faca379a5cd8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"useEffect","styles":{"code":true}},{"type":"text","text":" is powerful, but it should be used carefully. The professional mindset is: ","styles":{}},{"type":"text","text":"useEffect is for synchronizing with external systems, not for every state update or every calculation","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"ed367024-a6fe-4252-997e-dd8dfaef5dbc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]