[{"id":"0774024f-2dc2-4992-969a-47541e7d338a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When to Create Custom Hooks","styles":{}}],"children":[]},{"id":"087259e9-1f32-4f21-8c6d-8b6a5d4f1a00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Custom Hooks","styles":{"bold":true}},{"type":"text","text":" are functions you create to reuse React logic between components.","styles":{}}],"children":[]},{"id":"2db62e7a-2668-4b9a-a63e-9bb6909b6415","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"6570812f-4179-4551-885c-cebf124a42f4","type":"procode","props":{"code":"Custom Hook = reusable React logic\n","language":"txt","filename":"","files":"[{\"id\":\"on3dhx9hh\",\"name\":\"code\",\"code\":\"Custom Hook = reusable React logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8180615f-1f47-40e8-8fda-9bde45d6f591","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"aad34869-99d4-4e98-93bf-d2bf552fc24a","type":"procode","props":{"code":"function useOnlineStatus() {\n // reusable logic here\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"z46e6ae1p\",\"name\":\"code\",\"code\":\"function useOnlineStatus() {\\n // reusable logic here\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e7717b5-779a-4ede-a4cf-9c2ec6d855bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use custom Hooks when the same state, effect, or browser logic is repeated in multiple components.","styles":{}}],"children":[]},{"id":"a09eda17-f0d7-4e45-b937-fae2fd4347e6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs explain that React has built-in Hooks like ","styles":{}},{"type":"text","text":"useState","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"useContext","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"useEffect","styles":{"code":true}},{"type":"text","text":", but you can create your own Hooks for more specific needs such as fetching data, checking online status, or connecting to a chat room.","styles":{}}],"children":[]},{"id":"9ca9bb8c-bc76-4cc4-9ac4-5719069e8488","type":"divider","props":{},"children":[]},{"id":"60b5e0e1-116a-4add-b43d-01eeae6f1545","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"b666cdc0-879f-4c3d-9a3b-567905ffb7c8","type":"procode","props":{"code":"Create Custom Hooks When\n├── Logic is repeated\n├── State logic is reused\n├── useEffect logic is reused\n├── Browser API logic is reused\n├── Form logic is reused\n├── Fetching logic is reused\n├── Event listener logic is reused\n├── Timer logic is reused\n├── Component becomes too messy\n└── You want cleaner components\n","language":"txt","filename":"","files":"[{\"id\":\"ie2d0538x\",\"name\":\"code\",\"code\":\"Create Custom Hooks When\\n├── Logic is repeated\\n├── State logic is reused\\n├── useEffect logic is reused\\n├── Browser API logic is reused\\n├── Form logic is reused\\n├── Fetching logic is reused\\n├── Event listener logic is reused\\n├── Timer logic is reused\\n├── Component becomes too messy\\n└── You want cleaner components\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"05291dd4-3382-47ff-92d3-6ebd351c2d71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"567963d6-21fb-470d-ab6a-1b7e627fbc84","type":"procode","props":{"code":"Repeated Hook logic → custom Hook\n","language":"txt","filename":"","files":"[{\"id\":\"simcl9ebs\",\"name\":\"code\",\"code\":\"Repeated Hook logic → custom Hook\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f012de2-fb54-4b23-a368-28f6e0aa17fe","type":"divider","props":{},"children":[]},{"id":"4ce30e60-230a-4ce7-a3a6-ebe3034a10e9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What is a Custom Hook?","styles":{}}],"children":[]},{"id":"aecdc832-7eab-4f39-9a9d-74a616e7c6a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A custom Hook is a JavaScript or TypeScript function that starts with ","styles":{}},{"type":"text","text":"use","styles":{"code":true}},{"type":"text","text":" and can call other Hooks.","styles":{}}],"children":[]},{"id":"773a586f-c248-440c-a771-4e3fbf9f51af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"492a67d3-f0b6-4ce7-b255-8bbe6bb00f41","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport function useCounter(initialValue = 0) {\n const [count, setCount] = useState(initialValue)\n\n function increment() {\n setCount((value) => value + 1)\n }\n\n function decrement() {\n setCount((value) => value - 1)\n }\n\n return {\n count,\n increment,\n decrement,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"z8ck3wmmb\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport function useCounter(initialValue = 0) {\\n const [count, setCount] = useState(initialValue)\\n\\n function increment() {\\n setCount((value) => value + 1)\\n }\\n\\n function decrement() {\\n setCount((value) => value - 1)\\n }\\n\\n return {\\n count,\\n increment,\\n decrement,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59ad317e-73d6-40d8-9053-70e6a9f7765c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"51826c1e-ff79-40c5-a73e-55784cec1c5d","type":"procode","props":{"code":"export default function Counter() {\n const { count, increment, decrement } = useCounter(0)\n\n return (\n

Count: {count}

\n \n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"aalwwflb2\",\"name\":\"code\",\"code\":\"export default function Counter() {\\n const { count, increment, decrement } = useCounter(0)\\n\\n return (\\n

\\n

Count: {count}

\\n \\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63d5cfee-667a-451c-b831-bd589443b83c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"fa1fa0e5-670c-40b3-8327-55f1bd684a65","type":"procode","props":{"code":"Custom Hook hides logic.\nComponent focuses on UI.\n","language":"txt","filename":"","files":"[{\"id\":\"fmrsw8qok\",\"name\":\"code\",\"code\":\"Custom Hook hides logic.\\nComponent focuses on UI.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"841f2086-ec65-4a11-b8e5-a4ac8b53075e","type":"divider","props":{},"children":[]},{"id":"291c68dd-1860-4698-86cf-3cc4a0be4f66","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Naming Rule","styles":{}}],"children":[]},{"id":"71ead3ff-8e6c-46a6-8eff-585e3a672fde","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Custom Hook names must start with ","styles":{}},{"type":"text","text":"use","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"501aed37-9c02-4bcb-80cd-a59324ed8475","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Correct:","styles":{}}],"children":[]},{"id":"77c36882-6882-46c2-8d0a-62d90b455e39","type":"procode","props":{"code":"function useOnlineStatus() {}\nfunction useDebounce() {}\nfunction useLocalStorage() {}\nfunction useFetch() {}\nfunction useFormInput() {}\n","language":"tsx","filename":"","files":"[{\"id\":\"tdbvgvjn6\",\"name\":\"code\",\"code\":\"function useOnlineStatus() {}\\nfunction useDebounce() {}\\nfunction useLocalStorage() {}\\nfunction useFetch() {}\\nfunction useFormInput() {}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"591b8bfe-0e38-4e6f-ab4d-df4f6c465063","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Wrong:","styles":{}}],"children":[]},{"id":"cc36b087-b11e-4321-8ea4-6c54f474b90b","type":"procode","props":{"code":"function onlineStatus() {}\nfunction debounceValue() {}\nfunction getLocalStorage() {}\n","language":"tsx","filename":"","files":"[{\"id\":\"nq3tjeq4k\",\"name\":\"code\",\"code\":\"function onlineStatus() {}\\nfunction debounceValue() {}\\nfunction getLocalStorage() {}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fb607513-2db4-484a-a6ed-40f6338f5660","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a2a22b32-d5a2-4bb4-8ffe-aef6382f4879","type":"procode","props":{"code":"Hook name starts with use.\n","language":"txt","filename":"","files":"[{\"id\":\"3ssnwl9be\",\"name\":\"code\",\"code\":\"Hook name starts with use.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de4c8e48-085d-4275-ad17-058e97ab251a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs explain that Hook names must start with ","styles":{}},{"type":"text","text":"use","styles":{"code":true}},{"type":"text","text":" followed by a capital letter, like ","styles":{}},{"type":"text","text":"useState","styles":{"code":true}},{"type":"text","text":" or ","styles":{}},{"type":"text","text":"useOnlineStatus","styles":{"code":true}},{"type":"text","text":". This naming convention helps React and the linter know where Hooks may be used.","styles":{}}],"children":[]},{"id":"d83c6bd2-eb16-4b61-a890-ab3150350512","type":"divider","props":{},"children":[]},{"id":"31fdd9d5-e6c0-4715-bfb7-9f851614f9ef","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Logic is Repeated","styles":{}}],"children":[]},{"id":"f14f47fc-9834-4bb7-855b-37ed169bcb49","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create a custom Hook when the same Hook logic appears in multiple components.","styles":{}}],"children":[]},{"id":"4caa6ae7-ffed-488b-aeef-18a7c4651f20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"90e089c7-0d88-4381-ad21-be752ea89d30","type":"procode","props":{"code":"function StatusBar() {\n const [isOnline, setIsOnline] = useState(true)\n\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true)\n }\n\n function handleOffline() {\n setIsOnline(false)\n }\n\n window.addEventListener(\"online\", handleOnline)\n window.addEventListener(\"offline\", handleOffline)\n\n return () => {\n window.removeEventListener(\"online\", handleOnline)\n window.removeEventListener(\"offline\", handleOffline)\n }\n }, [])\n\n return

{isOnline ? \"Online\" : \"Offline\"}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"k8okk1a2z\",\"name\":\"code\",\"code\":\"function StatusBar() {\\n const [isOnline, setIsOnline] = useState(true)\\n\\n useEffect(() => {\\n function handleOnline() {\\n setIsOnline(true)\\n }\\n\\n function handleOffline() {\\n setIsOnline(false)\\n }\\n\\n window.addEventListener(\\\"online\\\", handleOnline)\\n window.addEventListener(\\\"offline\\\", handleOffline)\\n\\n return () => {\\n window.removeEventListener(\\\"online\\\", handleOnline)\\n window.removeEventListener(\\\"offline\\\", handleOffline)\\n }\\n }, [])\\n\\n return

{isOnline ? \\\"Online\\\" : \\\"Offline\\\"}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c10b508f-5d56-49b2-83a8-02b2535a1107","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If this same logic is also needed in another component, extract it.","styles":{}}],"children":[]},{"id":"c3d4ea04-21cf-4006-b7b6-a398ab37382f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"80d02ed7-a290-485a-89c2-16266c6e3058","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true)\n\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true)\n }\n\n function handleOffline() {\n setIsOnline(false)\n }\n\n window.addEventListener(\"online\", handleOnline)\n window.addEventListener(\"offline\", handleOffline)\n\n return () => {\n window.removeEventListener(\"online\", handleOnline)\n window.removeEventListener(\"offline\", handleOffline)\n }\n }, [])\n\n return isOnline\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"rw2ug9zny\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport function useOnlineStatus() {\\n const [isOnline, setIsOnline] = useState(true)\\n\\n useEffect(() => {\\n function handleOnline() {\\n setIsOnline(true)\\n }\\n\\n function handleOffline() {\\n setIsOnline(false)\\n }\\n\\n window.addEventListener(\\\"online\\\", handleOnline)\\n window.addEventListener(\\\"offline\\\", handleOffline)\\n\\n return () => {\\n window.removeEventListener(\\\"online\\\", handleOnline)\\n window.removeEventListener(\\\"offline\\\", handleOffline)\\n }\\n }, [])\\n\\n return isOnline\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8641d840-ddbe-47e6-84b7-3bf198cc02ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"eb963125-89c1-471e-bd49-d4513b3cec3a","type":"procode","props":{"code":"export function StatusBar() {\n const isOnline = useOnlineStatus()\n\n return

{isOnline ? \"Online\" : \"Offline\"}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"k2aj0j41h\",\"name\":\"code\",\"code\":\"export function StatusBar() {\\n const isOnline = useOnlineStatus()\\n\\n return

{isOnline ? \\\"Online\\\" : \\\"Offline\\\"}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ef80c1c9-aa17-4c4f-a12e-f6cf97701c6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b4035625-6637-482b-9a68-e18ae6cd67e9","type":"procode","props":{"code":"Repeated useState + useEffect logic\n└── move to custom Hook\n","language":"txt","filename":"","files":"[{\"id\":\"hoyca7pfv\",\"name\":\"code\",\"code\":\"Repeated useState + useEffect logic\\n└── move to custom Hook\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b03bd52c-8207-43da-9f06-d17d82219e42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs use this same online status example to show how duplicated state and Effect logic can be extracted into a reusable custom Hook.","styles":{}}],"children":[]},{"id":"2e5c3e69-9b39-4124-abc2-c9bb52263457","type":"divider","props":{},"children":[]},{"id":"6f8a4bee-0974-4f9b-a131-a33c82aa0fd2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Component Becomes Too Messy","styles":{}}],"children":[]},{"id":"00fa6625-1332-4c6f-a531-76e978e35745","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create a custom Hook when a component has too much logic.","styles":{}}],"children":[]},{"id":"d7b7be28-6916-4cc4-a42d-1985b9fafd3c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"fe829dba-6367-466c-8b77-bddec2ffa92f","type":"procode","props":{"code":"export default function SearchPage() {\n const [search, setSearch] = useState(\"\")\n const [debouncedSearch, setDebouncedSearch] = useState(\"\")\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDebouncedSearch(search)\n }, 500)\n\n return () => clearTimeout(timer)\n }, [search])\n\n return (\n setSearch(event.target.value)}\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"fz077b6r6\",\"name\":\"code\",\"code\":\"export default function SearchPage() {\\n const [search, setSearch] = useState(\\\"\\\")\\n const [debouncedSearch, setDebouncedSearch] = useState(\\\"\\\")\\n\\n useEffect(() => {\\n const timer = setTimeout(() => {\\n setDebouncedSearch(search)\\n }, 500)\\n\\n return () => clearTimeout(timer)\\n }, [search])\\n\\n return (\\n setSearch(event.target.value)}\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc4b64e8-2a7d-4397-9a4b-35ac86c46d2f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"2cedb455-d60e-425a-af86-777d1298d6f7","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport function useDebounce(value: string, delay = 500) {\n const [debouncedValue, setDebouncedValue] = useState(value)\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDebouncedValue(value)\n }, delay)\n\n return () => clearTimeout(timer)\n }, [value, delay])\n\n return debouncedValue\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"uah3ek0lb\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport function useDebounce(value: string, delay = 500) {\\n const [debouncedValue, setDebouncedValue] = useState(value)\\n\\n useEffect(() => {\\n const timer = setTimeout(() => {\\n setDebouncedValue(value)\\n }, delay)\\n\\n return () => clearTimeout(timer)\\n }, [value, delay])\\n\\n return debouncedValue\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a441cb9a-82ee-4def-a959-ccf21e464081","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"d9f3b5d8-9445-4a6d-a325-8d225808fe48","type":"procode","props":{"code":"export default function SearchPage() {\n const [search, setSearch] = useState(\"\")\n const debouncedSearch = useDebounce(search, 500)\n\n return (\n setSearch(event.target.value)}\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ygqfxgq52\",\"name\":\"code\",\"code\":\"export default function SearchPage() {\\n const [search, setSearch] = useState(\\\"\\\")\\n const debouncedSearch = useDebounce(search, 500)\\n\\n return (\\n setSearch(event.target.value)}\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8c0f57aa-9479-467a-9edc-b2418cafb34e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"027151c8-9abb-4468-b59c-f2385a1437eb","type":"procode","props":{"code":"Custom Hook makes component cleaner.\n","language":"txt","filename":"","files":"[{\"id\":\"bummr6ww0\",\"name\":\"code\",\"code\":\"Custom Hook makes component cleaner.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9467635c-7371-44ac-be24-d8d3bb60058a","type":"divider","props":{},"children":[]},{"id":"87ca75d1-5289-4673-a79c-262c67c87ee6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Browser API Logic is Reused","styles":{}}],"children":[]},{"id":"661bf24a-5445-4d02-aaa3-9724efdd1394","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create a custom Hook for repeated browser API logic.","styles":{}}],"children":[]},{"id":"060a2b18-3bdd-415f-8ff6-68b6801dd2d6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"bc181ee6-83d7-48b9-8fe0-85866768ad40","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport function useWindowWidth() {\n const [width, setWidth] = useState(window.innerWidth)\n\n useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth)\n }\n\n window.addEventListener(\"resize\", handleResize)\n\n return () => {\n window.removeEventListener(\"resize\", handleResize)\n }\n }, [])\n\n return width\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"fxn1x0qp4\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport function useWindowWidth() {\\n const [width, setWidth] = useState(window.innerWidth)\\n\\n useEffect(() => {\\n function handleResize() {\\n setWidth(window.innerWidth)\\n }\\n\\n window.addEventListener(\\\"resize\\\", handleResize)\\n\\n return () => {\\n window.removeEventListener(\\\"resize\\\", handleResize)\\n }\\n }, [])\\n\\n return width\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"afffbff4-cbd2-4b67-8fe0-df84a96afa8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"05d3d5e0-e8b7-4648-b743-5024bee138d9","type":"procode","props":{"code":"export default function App() {\n const width = useWindowWidth()\n\n return

Window width: {width}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"d5bsfaro6\",\"name\":\"code\",\"code\":\"export default function App() {\\n const width = useWindowWidth()\\n\\n return

Window width: {width}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b3027170-75ae-49ce-b550-b28764596cf8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6c5fda8a-17d1-4a0d-8551-419922e13454","type":"procode","props":{"code":"Browser API + state + cleanup\n└── good custom Hook candidate\n","language":"txt","filename":"","files":"[{\"id\":\"111qzj2b6\",\"name\":\"code\",\"code\":\"Browser API + state + cleanup\\n└── good custom Hook candidate\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"415e37d6-5f20-43f1-83a1-07976fdeafec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use custom Hooks for browser logic such as:","styles":{}}],"children":[]},{"id":"17ec0add-9c2f-401a-9d1d-29b4f8616b29","type":"procode","props":{"code":"window resize\nonline/offline status\nlocalStorage\nmedia query\nscroll position\nkeyboard shortcut\nmouse position\n","language":"txt","filename":"","files":"[{\"id\":\"uafg2lq4h\",\"name\":\"code\",\"code\":\"window resize\\nonline/offline status\\nlocalStorage\\nmedia query\\nscroll position\\nkeyboard shortcut\\nmouse position\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc418027-d935-4d22-b9f4-426af14faae3","type":"divider","props":{},"children":[]},{"id":"95b88ef0-8768-4a87-9dbd-836177587469","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Form Logic is Repeated","styles":{}}],"children":[]},{"id":"a923c862-b809-4f52-a773-ab3a32c8a098","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create a custom Hook when form input logic repeats.","styles":{}}],"children":[]},{"id":"813c8b3b-d300-4007-a7be-c2ebb7decd28","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"2d896861-a4c8-4bbb-a4dc-b3debff7a0ca","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport function useFormInput(initialValue = \"\") {\n const [value, setValue] = useState(initialValue)\n\n function handleChange(event: React.ChangeEvent) {\n setValue(event.target.value)\n }\n\n return {\n value,\n onChange: handleChange,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"22l064wl5\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport function useFormInput(initialValue = \\\"\\\") {\\n const [value, setValue] = useState(initialValue)\\n\\n function handleChange(event: React.ChangeEvent) {\\n setValue(event.target.value)\\n }\\n\\n return {\\n value,\\n onChange: handleChange,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cad5b599-a982-45be-a27b-a511c743aba8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"36bec24d-bda5-4cb0-a843-c589bb8a85b1","type":"procode","props":{"code":"export default function Form() {\n const name = useFormInput(\"\")\n const email = useFormInput(\"\")\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"66aqx2lv2\",\"name\":\"code\",\"code\":\"export default function Form() {\\n const name = useFormInput(\\\"\\\")\\n const email = useFormInput(\\\"\\\")\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ef30f052-8ff8-4451-92ad-f9829031973c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"48951ec2-e6ad-4893-8722-9ca85cae6fdf","type":"procode","props":{"code":"Repeated input value + onChange logic\n└── useFormInput\n","language":"txt","filename":"","files":"[{\"id\":\"l46n2andu\",\"name\":\"code\",\"code\":\"Repeated input value + onChange logic\\n└── useFormInput\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd75f2dc-9361-40db-a0e6-c6c321a9b94f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs show a similar ","styles":{}},{"type":"text","text":"useFormInput","styles":{"code":true}},{"type":"text","text":" example and explain that each call to the same custom Hook has independent state.","styles":{}}],"children":[]},{"id":"084694a9-c1fb-4492-b22f-3bb43d55b80d","type":"divider","props":{},"children":[]},{"id":"4f676462-210d-4cc1-8cdc-684d3ca014ae","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Custom Hooks Share Logic, Not State","styles":{}}],"children":[]},{"id":"6ede6f14-5a4e-42f0-a228-232996f68522","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important:","styles":{}}],"children":[]},{"id":"f6d9de93-f1be-4910-b137-05752f621f3d","type":"procode","props":{"code":"Custom Hooks share stateful logic.\nThey do not automatically share the same state.\n","language":"txt","filename":"","files":"[{\"id\":\"jqf4kg8vo\",\"name\":\"code\",\"code\":\"Custom Hooks share stateful logic.\\nThey do not automatically share the same state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"727a3d8e-327f-40c3-a362-104246bf3a1f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"9531b076-37f2-42ce-bf54-031d77cfbbc9","type":"procode","props":{"code":"const firstName = useFormInput(\"\")\nconst lastName = useFormInput(\"\")\n","language":"tsx","filename":"","files":"[{\"id\":\"yer0bgkjl\",\"name\":\"code\",\"code\":\"const firstName = useFormInput(\\\"\\\")\\nconst lastName = useFormInput(\\\"\\\")\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"462caf52-bff8-4d54-95fc-9b1687577cff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"f4dffaea-66c0-4d57-9146-7b348dccdc66","type":"procode","props":{"code":"firstName → own state\nlastName → own state\n","language":"txt","filename":"","files":"[{\"id\":\"arsjixv8r\",\"name\":\"code\",\"code\":\"firstName → own state\\nlastName → own state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f6651ae0-b670-4a5f-9e0b-5cb7f05ba969","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0c913015-440d-431a-a697-ce166354b74c","type":"procode","props":{"code":"Each custom Hook call gets its own state.\n","language":"txt","filename":"","files":"[{\"id\":\"nagegbcyh\",\"name\":\"code\",\"code\":\"Each custom Hook call gets its own state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0901ff83-1ae8-42b5-9b15-c06516029bf3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs explain that custom Hooks let you share stateful logic, not state itself. Each call to a Hook is independent from every other call to the same Hook.","styles":{}}],"children":[]},{"id":"7481106a-67a1-4c7a-9dc9-4348d28f884e","type":"divider","props":{},"children":[]},{"id":"74c2e57a-612f-47c6-a80b-919917e6d9dd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Fetching Logic is Repeated","styles":{}}],"children":[]},{"id":"72b8d85c-b20d-4368-b112-d804364e9479","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create a custom Hook when client-side fetching logic is repeated.","styles":{}}],"children":[]},{"id":"fd6b4d48-da28-4c98-aff9-9c0c70788f3e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"30b74d9e-5c5e-4b28-ba4b-ccfc5e6c2fcd","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport function useFetch(url: string) {\n const [data, setData] = useState(null)\n const [isLoading, setIsLoading] = useState(true)\n const [error, setError] = useState(\"\")\n\n useEffect(() => {\n async function loadData() {\n try {\n setIsLoading(true)\n setError(\"\")\n\n const response = await fetch(url)\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch data\")\n }\n\n const result = await response.json()\n setData(result)\n } catch {\n setError(\"Something went wrong\")\n } finally {\n setIsLoading(false)\n }\n }\n\n loadData()\n }, [url])\n\n return {\n data,\n isLoading,\n error,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"pcecd1bgc\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport function useFetch(url: string) {\\n const [data, setData] = useState(null)\\n const [isLoading, setIsLoading] = useState(true)\\n const [error, setError] = useState(\\\"\\\")\\n\\n useEffect(() => {\\n async function loadData() {\\n try {\\n setIsLoading(true)\\n setError(\\\"\\\")\\n\\n const response = await fetch(url)\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch data\\\")\\n }\\n\\n const result = await response.json()\\n setData(result)\\n } catch {\\n setError(\\\"Something went wrong\\\")\\n } finally {\\n setIsLoading(false)\\n }\\n }\\n\\n loadData()\\n }, [url])\\n\\n return {\\n data,\\n isLoading,\\n error,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ebfdb0f5-9584-4459-8381-8f77b660f7c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"1f02d498-0e4d-4c46-bddd-29da5a1fb713","type":"procode","props":{"code":"type Product = {\n id: number\n name: string\n}\n\nexport default function ProductsPage() {\n const { data, isLoading, error } = useFetch(\"/api/products\")\n\n if (isLoading) return

\n if (error) return

{error}

\n\n return (\n

{product.name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"3h5md0c63\",\"name\":\"code\",\"code\":\"type Product = {\\n id: number\\n name: string\\n}\\n\\nexport default function ProductsPage() {\\n const { data, isLoading, error } = useFetch(\\\"/api/products\\\")\\n\\n if (isLoading) return

\\n if (error) return

{error}

\\n\\n return (\\n

{product.name}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d89d643-87b8-43e4-a900-56c7737839d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"aeb06e15-54ed-4df4-80ef-e1cf1360a546","type":"procode","props":{"code":"Repeated fetch + loading + error logic\n└── custom Hook\n","language":"txt","filename":"","files":"[{\"id\":\"pvxuizfxl\",\"name\":\"code\",\"code\":\"Repeated fetch + loading + error logic\\n└── custom Hook\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87f59d47-9c47-4774-993f-4eecb7fe1b10","type":"divider","props":{},"children":[]},{"id":"3d255518-43d8-4eec-bfa1-8a7a6ea01348","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Event Listener Logic is Repeated","styles":{}}],"children":[]},{"id":"6d0c795d-fa54-4aa4-a56f-5b9a3b06218a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"2b0f9b9f-c5e1-4bda-bb80-13ab0d09c54e","type":"procode","props":{"code":"import { useEffect } from \"react\"\n\nexport function useEventListener(\n eventName: K,\n handler: (event: WindowEventMap[K]) => void\n) {\n useEffect(() => {\n window.addEventListener(eventName, handler)\n\n return () => {\n window.removeEventListener(eventName, handler)\n }\n }, [eventName, handler])\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"0v2nbtkb8\",\"name\":\"code\",\"code\":\"import { useEffect } from \\\"react\\\"\\n\\nexport function useEventListener(\\n eventName: K,\\n handler: (event: WindowEventMap[K]) => void\\n) {\\n useEffect(() => {\\n window.addEventListener(eventName, handler)\\n\\n return () => {\\n window.removeEventListener(eventName, handler)\\n }\\n }, [eventName, handler])\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9513ce70-6256-497a-bda6-4fb2a12e0276","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"95dc1d15-0e79-40c6-8638-3522a2c88a20","type":"procode","props":{"code":"export default function KeyboardShortcut() {\n useEventListener(\"keydown\", (event) => {\n if (event.key === \"Escape\") {\n console.log(\"Escape pressed\")\n }\n })\n\n return

Press Escape

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ky90o3sxv\",\"name\":\"code\",\"code\":\"export default function KeyboardShortcut() {\\n useEventListener(\\\"keydown\\\", (event) => {\\n if (event.key === \\\"Escape\\\") {\\n console.log(\\\"Escape pressed\\\")\\n }\\n })\\n\\n return

Press Escape

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c0735ade-58c0-4465-9566-6462c79203de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f8fd5810-e639-4a7f-93ca-c8bdde7d869b","type":"procode","props":{"code":"Repeated addEventListener + cleanup\n└── custom Hook\n","language":"txt","filename":"","files":"[{\"id\":\"rf9sw0o2p\",\"name\":\"code\",\"code\":\"Repeated addEventListener + cleanup\\n└── custom Hook\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e7b5de7c-0d11-4032-bc50-20caa3e01ba5","type":"divider","props":{},"children":[]},{"id":"5914e507-33cf-4b06-a433-b4821f32ec0d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When localStorage Logic is Repeated","styles":{}}],"children":[]},{"id":"4cb69f2a-1e6f-40c0-82dd-6a2fb06673aa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"11170427-b6ad-4b4c-8ffd-0f1bee911f7c","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\n\nexport function useLocalStorage(key: string, initialValue: string) {\n const [value, setValue] = useState(() => {\n return localStorage.getItem(key) ?? initialValue\n })\n\n useEffect(() => {\n localStorage.setItem(key, value)\n }, [key, value])\n\n return [value, setValue] as const\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"dzx9b578r\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\n\\nexport function useLocalStorage(key: string, initialValue: string) {\\n const [value, setValue] = useState(() => {\\n return localStorage.getItem(key) ?? initialValue\\n })\\n\\n useEffect(() => {\\n localStorage.setItem(key, value)\\n }, [key, value])\\n\\n return [value, setValue] as const\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41d0c58c-8e09-4d61-9ed8-de1f55df61b0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"1f4509d7-cd8c-4d15-aec5-51738dda0522","type":"procode","props":{"code":"export default function ThemeToggle() {\n const [theme, setTheme] = useLocalStorage(\"theme\", \"light\")\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"rlu7q8iax\",\"name\":\"code\",\"code\":\"export default function ThemeToggle() {\\n const [theme, setTheme] = useLocalStorage(\\\"theme\\\", \\\"light\\\")\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e57914d8-5b0d-4486-9729-6ccc76892935","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"bdf56832-1ccb-4140-8a78-e88ddf76e1e1","type":"procode","props":{"code":"localStorage read + write\n└── custom Hook\n","language":"txt","filename":"","files":"[{\"id\":\"cwhrym19t\",\"name\":\"code\",\"code\":\"localStorage read + write\\n└── custom Hook\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e0a92bf2-b588-4e88-a765-af2a9faa7b5d","type":"divider","props":{},"children":[]},{"id":"714b36b6-86b1-485f-a380-ff0cedc94e4b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Not to Create Custom Hooks","styles":{}}],"children":[]},{"id":"3d02edf3-d22a-4b69-b102-510d952f063b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not create a custom Hook for every small function.","styles":{}}],"children":[]},{"id":"d2f2100a-5d83-4863-a79e-8cc89442d57b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"782d78e3-12e0-431b-bcc8-f467e2578c83","type":"procode","props":{"code":"function useFormatPrice(price: number) {\n return `$${price}`\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"l87p2m33z\",\"name\":\"code\",\"code\":\"function useFormatPrice(price: number) {\\n return `$${price}`\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a0179431-9f56-4332-b502-81a834c178cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"c01818ab-1b86-4e6e-bb6a-71f72e01b370","type":"procode","props":{"code":"function formatPrice(price: number) {\n return `$${price}`\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"db2lt1x45\",\"name\":\"code\",\"code\":\"function formatPrice(price: number) {\\n return `$${price}`\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5be14b38-6347-49f9-8501-4aed9b613afc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why?","styles":{}}],"children":[]},{"id":"2d9e4924-e491-489d-a5a8-a555d04374c2","type":"procode","props":{"code":"formatPrice does not use React Hooks.\nIt can be a normal utility function.\n","language":"txt","filename":"","files":"[{\"id\":\"nhpyzmp5k\",\"name\":\"code\",\"code\":\"formatPrice does not use React Hooks.\\nIt can be a normal utility function.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9c4c7b9f-ae9d-40d8-828e-a6a5e5b6178d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"bc193fc4-d1ef-409b-9f6e-42705d4a63c7","type":"procode","props":{"code":"If it does not use Hooks, it usually does not need to be a custom Hook.\n","language":"txt","filename":"","files":"[{\"id\":\"bfqwgt69d\",\"name\":\"code\",\"code\":\"If it does not use Hooks, it usually does not need to be a custom Hook.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"65c35ee1-e825-4d00-a994-20d7b5f045e1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs say functions that do not call Hooks should avoid the ","styles":{}},{"type":"text","text":"use","styles":{"code":true}},{"type":"text","text":" prefix and should be written as regular functions instead.","styles":{}}],"children":[]},{"id":"9bc7a434-3691-4d05-a4e0-7ea367f17584","type":"divider","props":{},"children":[]},{"id":"877bb929-e2bb-49d8-af1c-23be5ca79a97","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Custom Hook vs Utility Function","styles":{}}],"children":[]},{"id":"64aaf257-d424-49a0-ad3a-05075be69b4b","type":"procode","props":{"code":"Custom Hook\n├── Starts with use\n├── Can call useState\n├── Can call useEffect\n├── Can call useRef\n├── Can call other Hooks\n├── Used inside components or other Hooks\n└── Reuses stateful React logic\n\nUtility Function\n├── Does not start with use\n├── Does not call Hooks\n├── Can be called anywhere\n├── Good for formatting\n├── Good for calculations\n└── Good for pure helper logic\n","language":"txt","filename":"","files":"[{\"id\":\"cr1bfaait\",\"name\":\"code\",\"code\":\"Custom Hook\\n├── Starts with use\\n├── Can call useState\\n├── Can call useEffect\\n├── Can call useRef\\n├── Can call other Hooks\\n├── Used inside components or other Hooks\\n└── Reuses stateful React logic\\n\\nUtility Function\\n├── Does not start with use\\n├── Does not call Hooks\\n├── Can be called anywhere\\n├── Good for formatting\\n├── Good for calculations\\n└── Good for pure helper logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"510517a5-b50b-46ac-a2d9-e2ec8ad2e847","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example utility:","styles":{}}],"children":[]},{"id":"d452d841-818e-414a-9b8d-c60773de67ee","type":"procode","props":{"code":"export function slugify(text: string) {\n return text.toLowerCase().replaceAll(\" \", \"-\")\n}\n","language":"ts","filename":"","files":"[{\"id\":\"7j8dli2lo\",\"name\":\"code\",\"code\":\"export function slugify(text: string) {\\n return text.toLowerCase().replaceAll(\\\" \\\", \\\"-\\\")\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"36bef322-3451-4e28-9412-f56926de6027","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example custom Hook:","styles":{}}],"children":[]},{"id":"efcf1eee-67f7-4587-86fb-8e1b4ff22455","type":"procode","props":{"code":"export function useDebounce(value: string) {\n // uses useState and useEffect\n}\n","language":"ts","filename":"","files":"[{\"id\":\"wp338jc9m\",\"name\":\"code\",\"code\":\"export function useDebounce(value: string) {\\n // uses useState and useEffect\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd0dff26-a7d1-4e2b-bfab-917999471a03","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"90997999-fd19-4399-bbde-34ce148378c0","type":"procode","props":{"code":"Hook = React logic\nUtility = normal reusable logic\n","language":"txt","filename":"","files":"[{\"id\":\"kpvq3m9ll\",\"name\":\"code\",\"code\":\"Hook = React logic\\nUtility = normal reusable logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bbd2f0a3-d14a-4c4b-ae76-f35c7a794c30","type":"divider","props":{},"children":[]},{"id":"db5b2b14-e496-4b3d-b101-68289fffa627","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Custom Hook vs Component","styles":{}}],"children":[]},{"id":"00ad2468-05a3-4a69-8f88-7f813c470cb6","type":"procode","props":{"code":"Component\n├── Returns JSX\n├── Renders UI\n├── Starts with capital letter\n└── Example: ProductCard\n\nCustom Hook\n├── Returns data or functions\n├── Does not return JSX normally\n├── Starts with use\n└── Example: useProducts\n","language":"txt","filename":"","files":"[{\"id\":\"sne88u0qm\",\"name\":\"code\",\"code\":\"Component\\n├── Returns JSX\\n├── Renders UI\\n├── Starts with capital letter\\n└── Example: ProductCard\\n\\nCustom Hook\\n├── Returns data or functions\\n├── Does not return JSX normally\\n├── Starts with use\\n└── Example: useProducts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73a5a193-54b4-4fd2-9f75-0fa384c93765","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example component:","styles":{}}],"children":[]},{"id":"f091af39-7410-4a0a-b894-1d82b115b8a1","type":"procode","props":{"code":"function ProductCard() {\n return

Product

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"hwxrfyra5\",\"name\":\"code\",\"code\":\"function ProductCard() {\\n return

Product

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"702ea01d-1175-4a89-afa6-f9ac1e69a6c4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example Hook:","styles":{}}],"children":[]},{"id":"7ecf5d43-db97-4b45-bed7-24019f7ba6b2","type":"procode","props":{"code":"function useProducts() {\n return {\n products: [],\n isLoading: false,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"06ywixtn2\",\"name\":\"code\",\"code\":\"function useProducts() {\\n return {\\n products: [],\\n isLoading: false,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ecd9d426-9d33-49ff-aa21-7734dcfe7ff5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c5db15a7-fad5-4613-9cf4-47aa4d224a55","type":"procode","props":{"code":"Component = UI\nCustom Hook = logic\n","language":"txt","filename":"","files":"[{\"id\":\"yk9gvkprr\",\"name\":\"code\",\"code\":\"Component = UI\\nCustom Hook = logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db12bda7-4ba6-4624-bc5a-2fe702e7682d","type":"divider","props":{},"children":[]},{"id":"c639c94d-2d19-4ffc-87c6-d3db7571dca7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Rules for Custom Hooks","styles":{}}],"children":[]},{"id":"3699da5d-cee6-449e-b60f-1b29f67bed7c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Custom Hooks must follow the Rules of Hooks.","styles":{}}],"children":[]},{"id":"d2eb9c10-d8ed-4d1a-9d4f-c72059aa5b06","type":"procode","props":{"code":"Rules\n├── Call Hooks at the top level\n├── Do not call Hooks inside conditions\n├── Do not call Hooks inside loops\n├── Do not call Hooks inside nested functions\n├── Only call Hooks from React components or custom Hooks\n└── Name custom Hooks with use\n","language":"txt","filename":"","files":"[{\"id\":\"vws5smyef\",\"name\":\"code\",\"code\":\"Rules\\n├── Call Hooks at the top level\\n├── Do not call Hooks inside conditions\\n├── Do not call Hooks inside loops\\n├── Do not call Hooks inside nested functions\\n├── Only call Hooks from React components or custom Hooks\\n└── Name custom Hooks with use\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d7904e6-d420-4fd3-84fa-43bb80122e0b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Wrong:","styles":{}}],"children":[]},{"id":"cafad5d5-3a77-4ab0-9094-498328053b27","type":"procode","props":{"code":"function useUser(isLoggedIn: boolean) {\n if (isLoggedIn) {\n const [user, setUser] = useState(null)\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"c9k2iu33p\",\"name\":\"code\",\"code\":\"function useUser(isLoggedIn: boolean) {\\n if (isLoggedIn) {\\n const [user, setUser] = useState(null)\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f553fcf-42e8-4576-804d-c6dafc0e6df3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Correct:","styles":{}}],"children":[]},{"id":"f08d329d-faa6-4767-8c52-0b15d137ea22","type":"procode","props":{"code":"function useUser(isLoggedIn: boolean) {\n const [user, setUser] = useState(null)\n\n useEffect(() => {\n if (!isLoggedIn) return\n\n // load user here\n }, [isLoggedIn])\n\n return user\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"kgq64c3tu\",\"name\":\"code\",\"code\":\"function useUser(isLoggedIn: boolean) {\\n const [user, setUser] = useState(null)\\n\\n useEffect(() => {\\n if (!isLoggedIn) return\\n\\n // load user here\\n }, [isLoggedIn])\\n\\n return user\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8c60b302-2c00-4f6f-a973-bb643d99e59c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React’s Rules of Hooks say Hooks must be called at the top level of React functions, before any early returns, and should not be called inside loops, conditions, nested functions, or try/catch/finally blocks.","styles":{}}],"children":[]},{"id":"49da07ad-e881-4865-a659-a04fbaa338cc","type":"divider","props":{},"children":[]},{"id":"fb878a49-0ee8-424c-a9ad-d00f397d5334","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Where to Put Custom Hooks","styles":{}}],"children":[]},{"id":"b5de5372-4ae1-4b04-b854-aacf42e67444","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended structure:","styles":{}}],"children":[]},{"id":"aec8a7b7-6bae-4221-8269-c1ee38864b76","type":"procode","props":{"code":"src/\n├── hooks/\n│ ├── useDebounce.ts\n│ ├── useLocalStorage.ts\n│ └── useOnlineStatus.ts\n│\n├── features/\n│ └── products/\n│ └── hooks/\n│ └── useProducts.ts\n│\n└── App.tsx\n","language":"txt","filename":"","files":"[{\"id\":\"dk3ihe8xa\",\"name\":\"code\",\"code\":\"src/\\n├── hooks/\\n│ ├── useDebounce.ts\\n│ ├── useLocalStorage.ts\\n│ └── useOnlineStatus.ts\\n│\\n├── features/\\n│ └── products/\\n│ └── hooks/\\n│ └── useProducts.ts\\n│\\n└── App.tsx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9515f376-8aea-453d-b1e2-e1e4e74164e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"c66a691f-5535-41f9-9ff0-561d094bc60a","type":"procode","props":{"code":"src/hooks\n└── shared hooks used by many features\n\nfeatures/*/hooks\n└── hooks only used by one feature\n","language":"txt","filename":"","files":"[{\"id\":\"xzck0zvpf\",\"name\":\"code\",\"code\":\"src/hooks\\n└── shared hooks used by many features\\n\\nfeatures/*/hooks\\n└── hooks only used by one feature\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"abacbda9-4ab4-4def-9b60-77013dd4d2b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f3b98763-0b30-41ec-964f-de8b29729971","type":"procode","props":{"code":"Shared Hook → src/hooks\nFeature Hook → features/name/hooks\n","language":"txt","filename":"","files":"[{\"id\":\"1mldjxe9p\",\"name\":\"code\",\"code\":\"Shared Hook → src/hooks\\nFeature Hook → features/name/hooks\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2315eaef-01f0-4f10-aea5-09758972921c","type":"divider","props":{},"children":[]},{"id":"ef575090-264b-454d-8537-400636928d61","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Good Custom Hook Examples","styles":{}}],"children":[]},{"id":"d9e40c8e-fc2a-474f-9715-d53301728044","type":"procode","props":{"code":"Good Custom Hooks\n├── useOnlineStatus\n├── useDebounce\n├── useLocalStorage\n├── useWindowSize\n├── useMediaQuery\n├── useFetch\n├── useFormInput\n├── usePagination\n├── useClickOutside\n├── useKeyboardShortcut\n└── useProducts\n","language":"txt","filename":"","files":"[{\"id\":\"dvmbnzdvk\",\"name\":\"code\",\"code\":\"Good Custom Hooks\\n├── useOnlineStatus\\n├── useDebounce\\n├── useLocalStorage\\n├── useWindowSize\\n├── useMediaQuery\\n├── useFetch\\n├── useFormInput\\n├── usePagination\\n├── useClickOutside\\n├── useKeyboardShortcut\\n└── useProducts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1eb1c6db-c032-48ee-b4f8-500460473e73","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"These are good because they usually contain reusable state, effect, ref, or event logic.","styles":{}}],"children":[]},{"id":"3ed162eb-ec97-43c6-88d1-6e189ea27b2b","type":"divider","props":{},"children":[]},{"id":"6ad019c5-e8e0-495c-9577-fa5fe26f483a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Bad Custom Hook Examples","styles":{}}],"children":[]},{"id":"8f8480bd-8948-4270-b450-f12b7fcfda23","type":"procode","props":{"code":"Bad Custom Hook Candidates\n├── useFormatPrice\n├── useSlugify\n├── useCapitalizeText\n├── useCalculateTotal\n├── useSortItems with no Hooks\n└── useGetInitials with no Hooks\n","language":"txt","filename":"","files":"[{\"id\":\"hqpon653g\",\"name\":\"code\",\"code\":\"Bad Custom Hook Candidates\\n├── useFormatPrice\\n├── useSlugify\\n├── useCapitalizeText\\n├── useCalculateTotal\\n├── useSortItems with no Hooks\\n└── useGetInitials with no Hooks\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d61b5f2-ddbb-4806-a63c-ac30a2c235ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better as utility functions:","styles":{}}],"children":[]},{"id":"7ccc3b20-2edc-48da-bee0-c259707bf073","type":"procode","props":{"code":"formatPrice\nslugify\ncapitalizeText\ncalculateTotal\nsortItems\ngetInitials\n","language":"txt","filename":"","files":"[{\"id\":\"l1cxr6ybm\",\"name\":\"code\",\"code\":\"formatPrice\\nslugify\\ncapitalizeText\\ncalculateTotal\\nsortItems\\ngetInitials\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"89833b11-d01c-40b7-87b1-ec6c2e48b987","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ddeb6826-b5c9-4c77-92b7-693b816a5a21","type":"procode","props":{"code":"Do not add use prefix just to make a function look React-like.\n","language":"txt","filename":"","files":"[{\"id\":\"v1qwwcan3\",\"name\":\"code\",\"code\":\"Do not add use prefix just to make a function look React-like.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cdc1b542-d01e-409d-b952-b7be83842387","type":"divider","props":{},"children":[]},{"id":"f8990cf7-aef2-4277-ba5b-4ebffa823383","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Custom Hook Return Patterns","styles":{}}],"children":[]},{"id":"7a8b317a-213e-4ef5-9112-11b8bddadb07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Return one value:","styles":{}}],"children":[]},{"id":"19211a52-6b1b-4195-a408-b085c1547f02","type":"procode","props":{"code":"const isOnline = useOnlineStatus()\n","language":"tsx","filename":"","files":"[{\"id\":\"wvrc209sc\",\"name\":\"code\",\"code\":\"const isOnline = useOnlineStatus()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5cb6b0ec-bf65-46d5-a0a4-7c4b86c7981b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Return object:","styles":{}}],"children":[]},{"id":"8157684f-d22e-459f-9f75-b650798de575","type":"procode","props":{"code":"const {\n data,\n isLoading,\n error,\n} = useFetch(\"/api/products\")\n","language":"tsx","filename":"","files":"[{\"id\":\"o7w9efjri\",\"name\":\"code\",\"code\":\"const {\\n data,\\n isLoading,\\n error,\\n} = useFetch(\\\"/api/products\\\")\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d4a4bfee-65d1-4f4d-8621-a5a21e899a2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Return tuple:","styles":{}}],"children":[]},{"id":"1844ac5b-5b22-4f28-8c57-418666eac77a","type":"procode","props":{"code":"const [theme, setTheme] = useLocalStorage(\"theme\", \"light\")\n","language":"tsx","filename":"","files":"[{\"id\":\"6xaekx8qc\",\"name\":\"code\",\"code\":\"const [theme, setTheme] = useLocalStorage(\\\"theme\\\", \\\"light\\\")\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e3f56bc3-06e8-4814-a0ac-0bf1e1e9f0ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"6b7cfb16-ed73-40b3-b491-6b471aabb9d8","type":"procode","props":{"code":"One value → return value\nMany named values → return object\nState-like API → return tuple\n","language":"txt","filename":"","files":"[{\"id\":\"y4sxk9mk6\",\"name\":\"code\",\"code\":\"One value → return value\\nMany named values → return object\\nState-like API → return tuple\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41c21492-ca5b-4dc8-aa17-ae50617d8c60","type":"divider","props":{},"children":[]},{"id":"d650afd6-8de3-4eba-889d-67090e26f470","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Custom Hooks in Real Projects","styles":{}}],"children":[]},{"id":"154611f2-85ff-45a6-8242-01b60c7bbdd8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use custom Hooks in real projects for:","styles":{}}],"children":[]},{"id":"4e2e822d-6078-414b-97b8-2a9b4abdbb6f","type":"procode","props":{"code":"Authentication\nData fetching\nPagination\nSearch debounce\nForm logic\nModal logic\nTable filter logic\nLocal storage\nTheme control\nBrowser events\nFeature-specific API logic\n","language":"txt","filename":"","files":"[{\"id\":\"my1g0pfcz\",\"name\":\"code\",\"code\":\"Authentication\\nData fetching\\nPagination\\nSearch debounce\\nForm logic\\nModal logic\\nTable filter logic\\nLocal storage\\nTheme control\\nBrowser events\\nFeature-specific API logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5906863d-6969-4d36-a811-3beb0fc1a112","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example for auth:","styles":{}}],"children":[]},{"id":"e551c7e5-a60a-4439-9280-0a478ed8fd9a","type":"procode","props":{"code":"export function useAuth() {\n const user = useUser()\n const isLoggedIn = Boolean(user)\n\n return {\n user,\n isLoggedIn,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"pmumcwp09\",\"name\":\"code\",\"code\":\"export function useAuth() {\\n const user = useUser()\\n const isLoggedIn = Boolean(user)\\n\\n return {\\n user,\\n isLoggedIn,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d5b8996f-d5be-4144-a4c1-83be0362512a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"854b1e99-fb34-4065-9caa-648a313ba136","type":"procode","props":{"code":"Custom Hook can make feature logic easier to reuse.\n","language":"txt","filename":"","files":"[{\"id\":\"g06nnemyu\",\"name\":\"code\",\"code\":\"Custom Hook can make feature logic easier to reuse.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62a4370e-74e8-4e9e-8e41-2e6280a8cd13","type":"divider","props":{},"children":[]},{"id":"e1cd7ec9-4b5c-4685-a435-45b91be4d511","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Do Not Use Custom Hook to Hide Bad Logic","styles":{}}],"children":[]},{"id":"9e00d4ba-af69-4976-b1ed-b5f2f59c7fb2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"de6f9058-cf5a-48ff-9d69-1744b01d5302","type":"procode","props":{"code":"function useEverything() {\n // auth logic\n // product logic\n // modal logic\n // form logic\n // table logic\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"qha0tzsw0\",\"name\":\"code\",\"code\":\"function useEverything() {\\n // auth logic\\n // product logic\\n // modal logic\\n // form logic\\n // table logic\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c1c1dd2-6fde-4c97-a480-166df6a8bcda","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"f8591f78-9bee-41ac-b2f1-5ecb7d5d1216","type":"procode","props":{"code":"Too many responsibilities in one Hook.\n","language":"txt","filename":"","files":"[{\"id\":\"g95r7nemw\",\"name\":\"code\",\"code\":\"Too many responsibilities in one Hook.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ccec39df-f294-4ed4-95ea-6e8ee1eded1b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"ac4274b3-d0ad-49a2-bff7-7a199273de24","type":"procode","props":{"code":"useAuth()\nuseProducts()\nuseModal()\nuseDebounce()\nusePagination()\n","language":"txt","filename":"","files":"[{\"id\":\"6qghi2hmi\",\"name\":\"code\",\"code\":\"useAuth()\\nuseProducts()\\nuseModal()\\nuseDebounce()\\nusePagination()\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2ae0e58f-b230-4f35-86f7-c3088180a19c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e058c89d-619b-41ba-967b-bee10c20243d","type":"procode","props":{"code":"One custom Hook should have one clear purpose.\n","language":"txt","filename":"","files":"[{\"id\":\"s08fzbv7c\",\"name\":\"code\",\"code\":\"One custom Hook should have one clear purpose.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3b84e6d8-5495-4698-898f-7947be16b5a4","type":"divider","props":{},"children":[]},{"id":"f74dd265-f3b0-434e-a922-1770de29694f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Custom Hook and useEffect Warning","styles":{}}],"children":[]},{"id":"6fbc9a76-6ba1-4b8c-9928-321f26e5957c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Not every ","styles":{}},{"type":"text","text":"useEffect","styles":{"code":true}},{"type":"text","text":" should become a custom Hook.","styles":{}}],"children":[]},{"id":"cc3f7f2b-b526-42e0-ba2f-81d6fb5cfe4c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create a custom Hook when the effect is reusable or makes the component cleaner.","styles":{}}],"children":[]},{"id":"bb17d021-eaa8-43d2-93a1-ba294a8980db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not create one when the effect is simple and used once.","styles":{}}],"children":[]},{"id":"f30c43cf-90e2-453f-915f-96eeeec6ad1c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example okay to keep inside component:","styles":{}}],"children":[]},{"id":"65c52df9-69d8-411a-81de-7656dd7a6dcd","type":"procode","props":{"code":"useEffect(() => {\n document.title = \"Dashboard\"\n}, [])\n","language":"tsx","filename":"","files":"[{\"id\":\"uuzx1b7nj\",\"name\":\"code\",\"code\":\"useEffect(() => {\\n document.title = \\\"Dashboard\\\"\\n}, [])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6bd0b3b6-4e3e-4ef2-ba68-c606b1381778","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6a69a164-db59-486c-b41d-c639e8741062","type":"procode","props":{"code":"Used once and simple → keep in component\nRepeated or complex → custom Hook\n","language":"txt","filename":"","files":"[{\"id\":\"5f95llof1\",\"name\":\"code\",\"code\":\"Used once and simple → keep in component\\nRepeated or complex → custom Hook\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01a12daf-f52a-42a7-822f-ae783d96267c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs emphasize that if you are not synchronizing with an external system, you probably do not need an Effect. This also means you should not create custom Hooks just to wrap unnecessary Effects.","styles":{}}],"children":[]},{"id":"bb0a4d24-8ba9-4911-b529-cd55f9bd2e40","type":"divider","props":{},"children":[]},{"id":"2b6bf69b-60dc-4279-9eba-c28b79cd8874","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Signs You Should Create a Custom Hook","styles":{}}],"children":[]},{"id":"bb2ae3c0-4214-4799-9b47-43797198b1d8","type":"procode","props":{"code":"Create a custom Hook when:\n├── Same Hook logic appears in 2 or more components\n├── Component is hard to read because of logic\n├── Logic uses useState and useEffect together\n├── Logic needs cleanup\n├── Logic connects to external system\n├── Logic uses browser APIs\n├── Logic needs to be tested separately\n├── Logic has a clear reusable name\n└── Hook can hide implementation details\n","language":"txt","filename":"","files":"[{\"id\":\"j34fcad4q\",\"name\":\"code\",\"code\":\"Create a custom Hook when:\\n├── Same Hook logic appears in 2 or more components\\n├── Component is hard to read because of logic\\n├── Logic uses useState and useEffect together\\n├── Logic needs cleanup\\n├── Logic connects to external system\\n├── Logic uses browser APIs\\n├── Logic needs to be tested separately\\n├── Logic has a clear reusable name\\n└── Hook can hide implementation details\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"72485980-f1b9-4844-98e6-b4c274b8ac4d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a6bbab0c-5499-442d-871f-d14c1ab8a037","type":"procode","props":{"code":"If logic has a clear name, it may become a custom Hook.\n","language":"txt","filename":"","files":"[{\"id\":\"opet7sr9f\",\"name\":\"code\",\"code\":\"If logic has a clear name, it may become a custom Hook.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50599f1a-f812-4476-aaa4-ae4a1156dff2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example names:","styles":{}}],"children":[]},{"id":"7781e3fe-d8ed-4d43-9346-6764d808cb48","type":"procode","props":{"code":"useOnlineStatus\nuseDebounce\nuseLocalStorage\nuseWindowSize\nuseProducts\nusePagination\n","language":"txt","filename":"","files":"[{\"id\":\"w9zpgv2cn\",\"name\":\"code\",\"code\":\"useOnlineStatus\\nuseDebounce\\nuseLocalStorage\\nuseWindowSize\\nuseProducts\\nusePagination\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"286d8a68-fa77-48b7-80ff-c8ccd320fc03","type":"divider","props":{},"children":[]},{"id":"6f8df14b-a3c4-4c5b-8ad0-76f29d74997a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Signs You Should Not Create a Custom Hook","styles":{}}],"children":[]},{"id":"8c905e8c-1e19-4afb-8de4-a9124457b233","type":"procode","props":{"code":"Do not create a custom Hook when:\n├── Logic is used only once and is simple\n├── Function does not call Hooks\n├── Logic is just formatting\n├── Logic is just calculation\n├── Hook name is unclear\n├── Hook does too many things\n├── It hides important component behavior\n└── It makes code harder to understand\n","language":"txt","filename":"","files":"[{\"id\":\"johocflbw\",\"name\":\"code\",\"code\":\"Do not create a custom Hook when:\\n├── Logic is used only once and is simple\\n├── Function does not call Hooks\\n├── Logic is just formatting\\n├── Logic is just calculation\\n├── Hook name is unclear\\n├── Hook does too many things\\n├── It hides important component behavior\\n└── It makes code harder to understand\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a66ae62-630f-444d-be4f-cb559c8f6f3c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6f1a5b21-d0b3-4b32-8411-28203bb35f47","type":"procode","props":{"code":"Custom Hook should make code clearer, not more confusing.\n","language":"txt","filename":"","files":"[{\"id\":\"1jydabvw1\",\"name\":\"code\",\"code\":\"Custom Hook should make code clearer, not more confusing.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6ed2bacc-1193-41bb-94c7-3398d6e8f51b","type":"divider","props":{},"children":[]},{"id":"d9354658-74b0-4d3c-be8f-bfaeb5ed5aa7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"c84ad9dc-bcdc-43be-87e8-59ba9b0c94f1","type":"procode","props":{"code":"Mistake 1: Naming normal utility function with use\nMistake 2: Creating custom Hook too early\nMistake 3: Making one huge custom Hook\nMistake 4: Returning unclear data\nMistake 5: Forgetting dependency array inside custom Hook\nMistake 6: Forgetting cleanup inside custom Hook\nMistake 7: Thinking custom Hooks share state automatically\nMistake 8: Calling custom Hook conditionally\nMistake 9: Calling custom Hook inside event handler\nMistake 10: Hiding simple logic behind unnecessary abstraction\n","language":"txt","filename":"","files":"[{\"id\":\"lbi0pjutu\",\"name\":\"code\",\"code\":\"Mistake 1: Naming normal utility function with use\\nMistake 2: Creating custom Hook too early\\nMistake 3: Making one huge custom Hook\\nMistake 4: Returning unclear data\\nMistake 5: Forgetting dependency array inside custom Hook\\nMistake 6: Forgetting cleanup inside custom Hook\\nMistake 7: Thinking custom Hooks share state automatically\\nMistake 8: Calling custom Hook conditionally\\nMistake 9: Calling custom Hook inside event handler\\nMistake 10: Hiding simple logic behind unnecessary abstraction\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2ca21db6-b007-4621-965d-76c6b1703ca2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"4e7ade3b-ab8a-4c84-ade5-775619f54e4a","type":"procode","props":{"code":"Start with normal component logic.\nWhen repeated or messy, extract to custom Hook.\nKeep custom Hook focused.\nName it clearly.\nReturn clear values.\n","language":"txt","filename":"","files":"[{\"id\":\"6yf8zgkl3\",\"name\":\"code\",\"code\":\"Start with normal component logic.\\nWhen repeated or messy, extract to custom Hook.\\nKeep custom Hook focused.\\nName it clearly.\\nReturn clear values.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d5127c81-2649-4ff6-925e-665ba4b86576","type":"divider","props":{},"children":[]},{"id":"1e28e15c-1e08-4019-8a8f-39eb94960bfc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"20523f91-f247-42c6-9843-a34752cb3abe","type":"procode","props":{"code":"Professional Custom Hook Pattern\n├── Start with normal component logic\n├── Notice repeated state/effect logic\n├── Extract only reusable logic\n├── Name Hook with useSomething\n├── Keep Hook focused on one purpose\n├── Return clear data and functions\n├── Keep UI inside components\n├── Keep logic inside Hooks\n├── Use utility functions for non-Hook logic\n├── Follow Rules of Hooks\n├── Add cleanup when needed\n├── Keep shared Hooks in src/hooks\n└── Keep feature Hooks inside feature folders\n","language":"txt","filename":"","files":"[{\"id\":\"ux6fu2rk8\",\"name\":\"code\",\"code\":\"Professional Custom Hook Pattern\\n├── Start with normal component logic\\n├── Notice repeated state/effect logic\\n├── Extract only reusable logic\\n├── Name Hook with useSomething\\n├── Keep Hook focused on one purpose\\n├── Return clear data and functions\\n├── Keep UI inside components\\n├── Keep logic inside Hooks\\n├── Use utility functions for non-Hook logic\\n├── Follow Rules of Hooks\\n├── Add cleanup when needed\\n├── Keep shared Hooks in src/hooks\\n└── Keep feature Hooks inside feature folders\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f01a3e67-7668-431d-ae65-51b2cc419319","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example structure:","styles":{}}],"children":[]},{"id":"055d03b0-3be9-4696-9695-fa82b8488ebe","type":"procode","props":{"code":"src/\n├── hooks/\n│ ├── useDebounce.ts\n│ ├── useLocalStorage.ts\n│ └── useOnlineStatus.ts\n│\n├── features/\n│ └── products/\n│ ├── hooks/\n│ │ └── useProducts.ts\n│ └── components/\n│ └── ProductList.tsx\n│\n└── utils/\n ├── format-price.ts\n └── slugify.ts\n","language":"txt","filename":"","files":"[{\"id\":\"8fs8c3tgj\",\"name\":\"code\",\"code\":\"src/\\n├── hooks/\\n│ ├── useDebounce.ts\\n│ ├── useLocalStorage.ts\\n│ └── useOnlineStatus.ts\\n│\\n├── features/\\n│ └── products/\\n│ ├── hooks/\\n│ │ └── useProducts.ts\\n│ └── components/\\n│ └── ProductList.tsx\\n│\\n└── utils/\\n ├── format-price.ts\\n └── slugify.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"abd891aa-a5d8-45da-9c46-70ddca842970","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"f822f698-b971-4d62-9f6a-1741944dbf0a","type":"procode","props":{"code":"Hooks folder = reusable React logic\nUtils folder = reusable normal logic\n","language":"txt","filename":"","files":"[{\"id\":\"qmriz2sx5\",\"name\":\"code\",\"code\":\"Hooks folder = reusable React logic\\nUtils folder = reusable normal logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eccca98c-b0c5-4847-8838-a4b2bc1c7649","type":"divider","props":{},"children":[]},{"id":"cd7b592f-5ce8-430d-9258-05a0b0b97a53","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"ec263075-5b00-44a2-869c-b9047457b93b","type":"procode","props":{"code":"Custom Hook = reusable Hook logic\n","language":"txt","filename":"","files":"[{\"id\":\"t4s2ytnez\",\"name\":\"code\",\"code\":\"Custom Hook = reusable Hook logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8c594b98-81b8-4cee-bf26-97ff59e300d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another way:","styles":{}}],"children":[]},{"id":"f4668bd1-c4a7-4321-984a-41fdd1854435","type":"procode","props":{"code":"Component\n├── UI\n└── calls custom Hook\n └── reusable logic\n","language":"txt","filename":"","files":"[{\"id\":\"yljzxog9b\",\"name\":\"code\",\"code\":\"Component\\n├── UI\\n└── calls custom Hook\\n └── reusable logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4e75b57d-9b57-4069-b49f-c50d2d5f87ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"889985b4-1773-4e72-a1b1-6eb6a092ba79","type":"procode","props":{"code":"Repeated logic in components\n├── extract to useSomething()\n├── component becomes cleaner\n└── logic becomes reusable\n","language":"txt","filename":"","files":"[{\"id\":\"qqrfkdcq9\",\"name\":\"code\",\"code\":\"Repeated logic in components\\n├── extract to useSomething()\\n├── component becomes cleaner\\n└── logic becomes reusable\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"45d7a945-bdf1-4fb9-b15c-76135a5fed88","type":"divider","props":{},"children":[]},{"id":"4187e779-4429-46fe-af5f-e6e1d92631cd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"38a87013-6333-4559-922f-8ec18e1069f9","type":"procode","props":{"code":"When to Create Custom Hooks\n├── When Hook logic is repeated\n├── When component logic becomes messy\n├── When state and effect logic are reused\n├── When browser API logic is reused\n├── When event listener logic is reused\n├── When form logic is reused\n├── When fetching logic is reused\n├── When localStorage logic is reused\n├── When the logic has a clear reusable name\n├── When you want components to focus on UI\n├── Do not create one for simple utility functions\n├── Do not create one if it does not use Hooks\n├── Do not create one too early\n├── Follow Rules of Hooks\n└── Keep each custom Hook focused\n","language":"txt","filename":"","files":"[{\"id\":\"r8crewhmr\",\"name\":\"code\",\"code\":\"When to Create Custom Hooks\\n├── When Hook logic is repeated\\n├── When component logic becomes messy\\n├── When state and effect logic are reused\\n├── When browser API logic is reused\\n├── When event listener logic is reused\\n├── When form logic is reused\\n├── When fetching logic is reused\\n├── When localStorage logic is reused\\n├── When the logic has a clear reusable name\\n├── When you want components to focus on UI\\n├── Do not create one for simple utility functions\\n├── Do not create one if it does not use Hooks\\n├── Do not create one too early\\n├── Follow Rules of Hooks\\n└── Keep each custom Hook focused\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ba7d0739-4359-4e11-903b-d6227f4e3bbf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Custom Hooks are important because React apps often repeat the same state, effect, event, browser, or form logic in many components. A good custom Hook makes your component cleaner, reuses logic safely, and gives the logic a clear name. The best mindset is: ","styles":{}},{"type":"text","text":"create custom Hooks when they make repeated or complex React logic easier to reuse and understand","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9002d126-d5c4-4662-a618-e7f38efbeb1f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]