[{"data":1,"prerenderedAt":337},["ShallowReactive",2],{"term-h\u002Fhook":3,"related-h\u002Fhook":320},{"id":4,"title":5,"acronym":6,"body":7,"category":301,"description":302,"difficulty":303,"extension":304,"letter":305,"meta":306,"navigation":87,"path":307,"related":308,"seo":314,"sitemap":315,"stem":318,"subcategory":6,"__hash__":319},"terms\u002Fterms\u002Fh\u002Fhook.md","Hook",null,{"type":8,"value":9,"toc":295},"minimark",[10,15,19,23,26,30,284,288,291],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only. They always start with 'use' like useState or useEffect. They're basically cheat codes for your components.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Hooks are functions introduced in React 16.8 that let function components tap into React features like state, context, lifecycle, and refs. Rules of hooks: only call them at the top level, only inside React functions. Custom hooks allow you to extract and share stateful logic.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useState, useEffect } from 'react';\n\nfunction useWindowSize() {\n  const [size, setSize] = useState(window.innerWidth);\n  useEffect(() => {\n    const handler = () => setSize(window.innerWidth);\n    window.addEventListener('resize', handler);\n    return () => window.removeEventListener('resize', handler);\n  }, []);\n  return size;\n}\n","javascript","",[38,39,40,82,89,106,149,164,194,222,256,267,278],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,66,69,72,76,79],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","import",[41,50,52],{"class":51},"sMK4o"," {",[41,54,56],{"class":55},"sTEyZ"," useState",[41,58,59],{"class":51},",",[41,61,62],{"class":55}," useEffect",[41,64,65],{"class":51}," }",[41,67,68],{"class":47}," from",[41,70,71],{"class":51}," '",[41,73,75],{"class":74},"sfazB","react",[41,77,78],{"class":51},"'",[41,80,81],{"class":51},";\n",[41,83,85],{"class":43,"line":84},2,[41,86,88],{"emptyLinePlaceholder":87},true,"\n",[41,90,92,96,100,103],{"class":43,"line":91},3,[41,93,95],{"class":94},"spNyl","function",[41,97,99],{"class":98},"s2Zo4"," useWindowSize",[41,101,102],{"class":51},"()",[41,104,105],{"class":51}," {\n",[41,107,109,112,115,118,120,123,126,129,131,135,138,141,144,147],{"class":43,"line":108},4,[41,110,111],{"class":94},"  const",[41,113,114],{"class":51}," [",[41,116,117],{"class":55},"size",[41,119,59],{"class":51},[41,121,122],{"class":55}," setSize",[41,124,125],{"class":51},"]",[41,127,128],{"class":51}," =",[41,130,56],{"class":98},[41,132,134],{"class":133},"swJcz","(",[41,136,137],{"class":55},"window",[41,139,140],{"class":51},".",[41,142,143],{"class":55},"innerWidth",[41,145,146],{"class":133},")",[41,148,81],{"class":51},[41,150,152,155,157,159,162],{"class":43,"line":151},5,[41,153,154],{"class":98},"  useEffect",[41,156,134],{"class":133},[41,158,102],{"class":51},[41,160,161],{"class":94}," =>",[41,163,105],{"class":51},[41,165,167,170,173,175,178,180,182,184,186,188,190,192],{"class":43,"line":166},6,[41,168,169],{"class":94},"    const",[41,171,172],{"class":55}," handler",[41,174,128],{"class":51},[41,176,177],{"class":51}," ()",[41,179,161],{"class":94},[41,181,122],{"class":98},[41,183,134],{"class":133},[41,185,137],{"class":55},[41,187,140],{"class":51},[41,189,143],{"class":55},[41,191,146],{"class":133},[41,193,81],{"class":51},[41,195,197,200,202,205,207,209,212,214,216,218,220],{"class":43,"line":196},7,[41,198,199],{"class":55},"    window",[41,201,140],{"class":51},[41,203,204],{"class":98},"addEventListener",[41,206,134],{"class":133},[41,208,78],{"class":51},[41,210,211],{"class":74},"resize",[41,213,78],{"class":51},[41,215,59],{"class":51},[41,217,172],{"class":55},[41,219,146],{"class":133},[41,221,81],{"class":51},[41,223,225,228,230,232,235,237,240,242,244,246,248,250,252,254],{"class":43,"line":224},8,[41,226,227],{"class":47},"    return",[41,229,177],{"class":51},[41,231,161],{"class":94},[41,233,234],{"class":55}," window",[41,236,140],{"class":51},[41,238,239],{"class":98},"removeEventListener",[41,241,134],{"class":133},[41,243,78],{"class":51},[41,245,211],{"class":74},[41,247,78],{"class":51},[41,249,59],{"class":51},[41,251,172],{"class":55},[41,253,146],{"class":133},[41,255,81],{"class":51},[41,257,259,262,265],{"class":43,"line":258},9,[41,260,261],{"class":51},"  },",[41,263,264],{"class":133}," [])",[41,266,81],{"class":51},[41,268,270,273,276],{"class":43,"line":269},10,[41,271,272],{"class":47},"  return",[41,274,275],{"class":55}," size",[41,277,81],{"class":51},[41,279,281],{"class":43,"line":280},11,[41,282,283],{"class":51},"}\n",[11,285,287],{"id":286},"when-youll-hear-this","When You'll Hear This",[16,289,290],{},"\"Write a custom hook to share that fetching logic.\" \u002F \"You broke the rules of hooks — don't call useEffect inside an if statement.\"",[292,293,294],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":84,"depth":84,"links":296},[297,298,299,300],{"id":13,"depth":84,"text":14},{"id":21,"depth":84,"text":22},{"id":28,"depth":84,"text":29},{"id":286,"depth":84,"text":287},"frontend","Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only.","intermediate","md","h",{},"\u002Fterms\u002Fh\u002Fhook",[309,310,311,312,313],"Composable","State","Lifecycle","React","Reactive",{"title":5,"description":302},{"changefreq":316,"priority":317},"weekly",0.7,"terms\u002Fh\u002Fhook","GsifIvN4NCvYXB66rf90bZXa6_jvRIbMTVX6P9TEGls",[321,324,327,331,334],{"title":309,"path":322,"acronym":6,"category":301,"difficulty":303,"description":323},"\u002Fterms\u002Fc\u002Fcomposable","Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together.",{"title":311,"path":325,"acronym":6,"category":301,"difficulty":303,"description":326},"\u002Fterms\u002Fl\u002Flifecycle","The lifecycle is a component's life story — it's born (mounted), lives and updates (updates), then dies (unmounted).",{"title":312,"path":328,"acronym":6,"category":301,"difficulty":329,"description":330},"\u002Fterms\u002Fr\u002Freact","beginner","React is a JavaScript library from Meta for building UIs out of components.",{"title":313,"path":332,"acronym":6,"category":301,"difficulty":303,"description":333},"\u002Fterms\u002Fr\u002Freactive","Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.",{"title":310,"path":335,"acronym":6,"category":301,"difficulty":329,"description":336},"\u002Fterms\u002Fs\u002Fstate","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.",1776518287201]