1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[57062],{91693:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/advent/19-must-have-react-hooks",function(){return n(60275)}])},60275:function(s,e,n){"use strict";n.r(e),n.d(e,{__N_SSG:function(){return r},default:function(){return j},metadata:function(){return t}});var a=n(85893),l=n(91644),c=n(47185),r=!0;let t={date:"Dec 19 2023",title:"\uD83C\uDF84Top 5 extra react hooks\uD83C\uDF1F",description:"A list of the top 5 extra react hooks that you should use in 2024",keywords:"react,hooks"},i=function(s){let{children:e}=s;return(0,a.jsx)(c.Z,{date:t.date,title:t.title,children:e})};function h(s){let e={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",span:"span",strong:"strong",...(0,l.a)(),...s.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:(0,a.jsx)(e.a,{href:"/advent/",children:"Back to 2023 Advent Calendar"})}),"\n",(0,a.jsx)(e.h2,{children:"1. useFetch"}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Implementation:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"import"})," { useState, useEffect } ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(e.span,{className:"hljs-string",children:"'react'"}),";\n\n",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useFetch"})," = (",(0,a.jsx)(e.span,{className:"hljs-params",children:"url"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [data, setData] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(e.span,{className:"hljs-literal",children:"null"}),");\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [loading, setLoading] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(e.span,{className:"hljs-literal",children:"true"}),");\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [error, setError] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(e.span,{className:"hljs-literal",children:"null"}),");\n\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"fetchData"})," = ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"async"})," (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"try"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," response = ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"await"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"fetch"}),"(url);\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," result = ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"await"})," response.",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"json"}),"();\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"setData"}),"(result);\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"setLoading"}),"(",(0,a.jsx)(e.span,{className:"hljs-literal",children:"false"}),");\n } ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"catch"})," (error) {\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"setError"}),"(error);\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"setLoading"}),"(",(0,a.jsx)(e.span,{className:"hljs-literal",children:"false"}),");\n }\n };\n\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"fetchData"}),"();\n }, [url]);\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," { data, loading, error };\n};\n"]})}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Usage Example:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"MyComponent"})," = (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," { data, loading, error } = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useFetch"}),"(",(0,a.jsx)(e.span,{className:"hljs-string",children:'"https://api.example.com/data"'}),");\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"if"})," (loading) ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsxs)(e.span,{className:"xml",children:[(0,a.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,a.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"Loading...",(0,a.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,a.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]})]}),";\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"if"})," (error) ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsxs)(e.span,{className:"xml",children:[(0,a.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,a.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"Error: {error.message}",(0,a.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,a.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]})]}),";\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsxs)(e.span,{className:"xml",children:[(0,a.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,a.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"{JSON.stringify(data)}",(0,a.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,a.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]})]}),";\n};\n"]})}),"\n",(0,a.jsx)(e.h2,{children:"2. useLocalStorage"}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Implementation:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"import"}
1)," { useState, useEffect } ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(e.span,{className:"hljs-string",children:"'react'"}),";\n\n",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useLocalStorage"})," = (",(0,a.jsx)(e.span,{className:"hljs-params",children:"key, initialValue"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [storedValue, setStoredValue] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"try"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," item = ",(0,a.jsx)(e.span,{className:"hljs-variable language_",children:"window"}),".",(0,a.jsx)(e.span,{className:"hljs-property",children:"localStorage"}),".",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"getItem"}),"(key);\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," item ? ",(0,a.jsx)(e.span,{className:"hljs-title class_",children:"JSON"}),".",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"parse"}),"(item) : initialValue;\n } ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"catch"})," (error) {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," initialValue;\n }\n });\n\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-variable language_",children:"window"}),".",(0,a.jsx)(e.span,{className:"hljs-property",children:"localStorage"}),".",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"setItem"}),"(key, ",(0,a.jsx)(e.span,{className:"hljs-title class_",children:"JSON"}),".",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"stringify"}),"(storedValue));\n }, [key, storedValue]);\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," [storedValue, setStoredValue];\n};\n"]})}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Usage Example:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"MyComponent"})," = (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [name, setName] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useLocalStorage"}),"(",(0,a.jsx)(e.span,{className:"hljs-string",children:"'name'"}),", ",(0,a.jsx)(e.span,{className:"hljs-string",children:"''"}),");\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," (\n ",(0,a.jsxs)(e.span,{className:"xml",children:[(0,a.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,a.jsx)(e.span,{className:"hljs-name",children:"input"}),"\n ",(0,a.jsx)(e.span,{className:"hljs-attr",children:"type"}),"=",(0,a.jsx)(e.span,{className:"hljs-string",children:'"text"'}),"\n ",(0,a.jsx)(e.span,{className:"hljs-attr",children:"value"}),"=",(0,a.jsx)(e.span,{className:"hljs-string",children:"{name}"}),"\n ",(0,a.jsx)(e.span,{className:"hljs-attr",children:"onChange"}),"=",(0,a.jsx)(e.span,{className:"hljs-string",children:"{(e)"})," =>"]})," setName(e.target.value)}\n />"]}),"\n );\n};\n"]})}),"\n",(0,a.jsx)(e.h2,{children:"3. useToggle"}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Implementation:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"import"})," { useState, useCallback } ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(e.span,{className:"hljs-string",children:"'react'"}),";\n\n",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useToggle"})," = (",(0,a.jsxs)(e.span,{className:"hljs-params",children:["initialValue = ",(0,a.jsx)(e.span,{className:"hljs-literal",children:"false"})]}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [value, setValue] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(initialValue);\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," toggle = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useCallback"}
1),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"setValue"}),"(",(0,a.jsxs)(e.span,{className:"hljs-function",children:[(0,a.jsx)(e.span,{className:"hljs-params",children:"v"})," =>"]})," !v);\n }, []);\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," [value, toggle];\n};\n"]})}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Usage Example:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"MyComponent"})," = (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [isOn, toggleIsOn] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useToggle"}),"();\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," (\n ",(0,a.jsxs)(e.span,{className:"xml",children:[(0,a.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,a.jsx)(e.span,{className:"hljs-name",children:"button"})," ",(0,a.jsx)(e.span,{className:"hljs-attr",children:"onClick"}),"=",(0,a.jsx)(e.span,{className:"hljs-string",children:"{toggleIsOn}"}),">"]}),"\n {isOn ? 'ON' : 'OFF'}\n ",(0,a.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,a.jsx)(e.span,{className:"hljs-name",children:"button"}),">"]})]}),"\n );\n};\n"]})}),"\n",(0,a.jsx)(e.h2,{children:"4. useDebounce"}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Implementation:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"import"})," { useState, useEffect } ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(e.span,{className:"hljs-string",children:"'react'"}),";\n\n",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useDebounce"})," = (",(0,a.jsx)(e.span,{className:"hljs-params",children:"value, delay"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [debouncedValue, setDebouncedValue] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(value);\n\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," handler = ",(0,a.jsx)(e.span,{className:"hljs-built_in",children:"setTimeout"}),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"setDebouncedValue"}),"(value);\n }, delay);\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," ",(0,a.jsx)(e.span,{className:"hljs-built_in",children:"clearTimeout"}),"(handler);\n }, [value, delay]);\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," debouncedValue;\n};\n"]})}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Usage Example:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"MyComponent"})," = (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [searchTerm, setSearchTerm] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(e.span,{className:"hljs-string",children:"''"}),");\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," debouncedSearchTerm = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useDebounce"}),"(searchTerm, ",(0,a.jsx)(e.span,{className:"hljs-number",children:"500"}),");\n\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useEffect"}
1),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"fetchData"})," = ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"async"})," (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-comment",children:"// Fetch data with debouncedSearchTerm"}),"\n };\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"fetchData"}),"();\n }, [debouncedSearchTerm]);\n\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," (\n ",(0,a.jsxs)(e.span,{className:"xml",children:[(0,a.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,a.jsx)(e.span,{className:"hljs-name",children:"input"}),"\n ",(0,a.jsx)(e.span,{className:"hljs-attr",children:"type"}),"=",(0,a.jsx)(e.span,{className:"hljs-string",children:'"text"'}),"\n ",(0,a.jsx)(e.span,{className:"hljs-attr",children:"value"}),"=",(0,a.jsx)(e.span,{className:"hljs-string",children:"{searchTerm}"}),"\n ",(0,a.jsx)(e.span,{className:"hljs-attr",children:"onChange"}),"=",(0,a.jsx)(e.span,{className:"hljs-string",children:"{(e)"})," =>"]})," setSearchTerm(e.target.value)}\n />"]}),"\n );\n};\n"]})}),"\n",(0,a.jsx)(e.h2,{children:"5. useInterval"}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Implementation:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"import"})," { useEffect, useRef } ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"from"})," ",(0,a.jsx)(e.span,{className:"hljs-string",children:"'react'"}),";\n\n",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useInterval"})," = (",(0,a.jsx)(e.span,{className:"hljs-params",children:"callback, delay"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," savedCallback = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useRef"}),"();\n\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n savedCallback.",(0,a.jsx)(e.span,{className:"hljs-property",children:"current"})," = callback;\n }, [callback]);\n\n ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"tick"})," = (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n savedCallback.",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"current"}),"();\n };\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"if"})," (delay !== ",(0,a.jsx)(e.span,{className:"hljs-literal",children:"null"}),") {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"let"})," id = ",(0,a.jsx)(e.span,{className:"hljs-built_in",children:"setInterval"}),"(tick, delay);\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsx)(e.span,{className:"hljs-function",children:"() =>"})," ",(0,a.jsx)(e.span,{className:"hljs-built_in",children:"clearInterval"}),"(id);\n }\n }, [delay]);\n};\n"]})}),"\n",(0,a.jsx)(e.p,{children:(0,a.jsx)(e.strong,{children:"Usage Example:"})}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"MyComponent"})," = (",(0,a.jsx)(e.span,{className:"hljs-params"}),") => {\n ",(0,a.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [count, setCount] = ",(0,a.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(e.span,{className:"hljs-number",children:"0"}),");\n\n useInterval\n"]})})]})}function j(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(i,{...s,children:(0,a.jsx)(h,{...s})})}},47185:function(s,e,n){"use strict";n.d(e,{Z:function(){return h}});var a=n(85893),l=n(43078),c=n(9008),r=n.n(c),t=n(11163);n(48097);let i="https://www.devtoolsdaily.com";function h(s){let{date:e,children:n,title:c,useContainer:h=!0,articleSchema:j}=s,d=(0,t.useRouter)(),o=((null==d?void 0:d.asPath)||"").split("?")[0].split("#")[0],m="".concat(i).c
1oncat(o),p=j?JSON.stringify({"@context":"https://schema.org","@type":j.type||"TechArticle",headline:j.title,...j.description?{description:j.description}:{},...j.keywords?{keywords:j.keywords}:{},...j.date?{datePublished:j.date,dateModified:j.date}:{},mainEntityOfPage:{"@type":"WebPage","@id":m},author:{"@type":"Organization",name:"DevTools Daily",url:i},publisher:{"@type":"Organization",name:"DevTools Daily",url:i}}).replace(/</g,"\\u003c"):null,x=o.startsWith("/blog/")&&"/blog/"!==o&&"/blog"!==o?JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"DevTools Daily",item:"".concat(i,"/")},{"@type":"ListItem",position:2,name:"Blog",item:"".concat(i,"/blog/")},{"@type":"ListItem",position:3,name:c,item:m}]}).replace(/</g,"\\u003c"):null,u=h?(0,a.jsxs)(l.W,{className:"blog-article",children:[(0,a.jsx)("h1",{children:c}),(0,a.jsx)("div",{className:"text-sm italic date pb-1 pt-1",children:e}),n]}):(0,a.jsxs)("div",{className:"blog-article",children:[(0,a.jsx)("h1",{children:c}),n]});return(0,a.jsxs)(a.Fragment,{children:[(p||x)&&(0,a.jsxs)(r(),{children:[p&&(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:p}}),x&&(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:x}})]}),u]})}},91644:function(s,e,n){"use strict";function a(s){return{...s}}n.d(e,{a:function(){return a}})},48097:function(){},43078:function(s,e,n){"use strict";n.d(e,{W:function(){return m}});var a=n(85893);n(67294);var l=n(69429),c=n(13637),r=n(90987),t=n(46976),i=n(33583),h=n(9535),j={root:"m_7485cace"};let d={},o=(0,c.Z)((s,{size:e,fluid:n})=>({root:{"--container-size":n?void 0:(0,l.ap)(e,"container-size")}})),m=(0,h.d5)((s,e)=>{let n=(0,r.w)("Container",d,s),{classNames:l,className:c,style:h,styles:m,unstyled:p,vars:x,fluid:u,mod:N,...f}=n,g=(0,t.y)({name:"Container",classes:j,props:n,className:c,style:h,classNames:l,styles:m,unstyled:p,vars:x,varsResolver:o});return(0,a.jsx)(i.x,{ref:e,mod:[{fluid:u},N],...g("root"),...f})});m.classes=j,m.displayName="@mantine/core/Container"}},function(s){s.O(0,[92888,49774,40179],function(){return s(s.s=91693)}),_N_E=s.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.