f6fcbbbc-9345ec602178181502da.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{"vy+P":function(a,s,e){"use strict";e.r(s),e.d(s,"_frontmatter",(function(){return j})),e.d(s,"default",(function(){return g}));var n=e("35sm"),t=e("PgR7"),c=e("blud"),b=e("q9ay"),p=e("RGxm"),m=e("Th6I"),j={},O=function(a){return function(s){return console.warn("Component "+a+" was not imported, exported, or provided by MDXProvider as global scope"),Object(c.b)("div",s)}},N=O("Link"),r=O("Example"),i={_frontmatter:j},l=m.a;function g(a){var s=a.components,e=Object(n.a)(a,["components"]);return Object(c.b)(l,Object.assign({},i,e,{components:s,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"best-practices"},"Best Practices",Object(c.b)("a",Object.assign({parentName:"h2"},{href:"#best-practices","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("blockquote",null,Object(c.b)("p",{parentName:"blockquote"},"obviously opinionated, apply as appropriate")),Object(c.b)("h3",{id:"tools"},"Tools",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#tools","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/Microsoft/TypeScript",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"typescript")),Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"typed templates are awesome"),Object(c.b)("li",{parentName:"ul"},"1000x better than ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/typechecking-with-proptypes.html",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"propTypes"))))),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/eslint/eslint",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"eslint")),Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"automated code review"))),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/prettier/prettier",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"prettier")),Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"never worry about about whitespace again"))),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/facebook/jest",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"jest")),Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"unit testing never felt this good"))),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/typicode/husky",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"husky"))," & ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/okonet/lint-staged",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"lint-staged")),Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"enforce linting rules on everyone"),Object(c.b)("li",{parentName:"ul"},"less failed builds"))),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/facebook/create-react-app",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"create-react-app")),Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"baked in with most of these")))),Object(c.b)("h3",{id:"components"},"Components",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#components","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"prefer ",Object(c.b)("inlineCode",{parentName:"li"},"FC"),Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},Object(c.b)(N,Object.assign({parentName:"li"},{to:"/class-components#bitcoin-price"},{mdxType:"Link"}),"compare")),Object(c.b)("li",{parentName:"ul"},"smaller the better"))),Object(c.b)("li",{parentName:"ul"},"prefer primitive state/props over objects/arrays",Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"React can ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update",target:"_blank",rel:"noreferrer"}),"optimize")," away updates")))),Object(c.b)(r,{link:"https://codesandbox.io/s/y31mj?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"0"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," BadFlexBox"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<{"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  place"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?:"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { align"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?:"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"; justify"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?:"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <></>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"badFlexBox"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"BadFlexBox"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"place"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ align"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"center"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }}>children</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"BadFlexBox"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," GoodFlexBox"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<{"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  align"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?:"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  justify"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?:"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <></>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," goodFlexBox "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"GoodFlexBox"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"align"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"center"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">children</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"GoodFlexBox"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<{ options"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"[] }> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <></>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," constantOptions "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ["),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"hello"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"world"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," goodSelect "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"options"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{constantOptions} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," badSelect "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Select"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"options"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{["),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"hello"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"world"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"]} />")))))),mdxType:"Example"}),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)(N,Object.assign({parentName:"li"},{to:"/custom-hooks"},{mdxType:"Link"}),"custom hook")," all the things",Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"even if it’s not (yet) shared"),Object(c.b)("li",{parentName:"ul"},"easier testing, can be mocked"))),Object(c.b)("li",{parentName:"ul"},"props",Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"use ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Default_values_2",target:"_blank",rel:"noreferrer"}),"destructuring")," to set defaults"),Object(c.b)("li",{parentName:"ul"},Object(c.b)(N,Object.assign({parentName:"li"},{to:"/about-jsx#spread-props"},{mdxType:"Link"}),"spread")," unused props ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/jsx-in-depth.html#spread-attributes",target:"_blank",rel:"noreferrer"}),"(contentious)"))))),Object(c.b)(r,{link:"https://codesandbox.io/s/fw4tt?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"1"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, InputHTMLAttributes } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"ClosedInput"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<{ type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?:"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"text"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"tel"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  type "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"text"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{type} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," typeText "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ClosedInput"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," typeTel "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ClosedInput"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"tel"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// export const cannotAddEvents = <ClosedInput onKeyDown={() => {}} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," OpenInput"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"InputHTMLAttributes"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLInputElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  type "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"text"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"props"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{type} {"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"..."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"props} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," canAddEvents "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"OpenInput"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onKeyDown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {}} />")))))),mdxType:"Example"}),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"parent-child communication & global state via context",Object(c.b)("ul",{parentName:"li"},Object(c.b)("li",{parentName:"ul"},"don’t ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/react-api.html#cloneelement",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"cloneElement")))))),Object(c.b)(r,{link:"https://codesandbox.io/s/90pvu?file=/src/example.tsx",testLink:"https://codesandbox.io/s/4kglc?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"2"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  createContext,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  CSSProperties,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  FC,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  ReactNode,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useContext,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useMemo,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region global"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"GlobalContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  theme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"dark"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"light"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," GlobalContext "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"createContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"GlobalContextType"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">({ theme"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"dark"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"WithGlobal"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { theme } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(GlobalContext)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," style "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useMemo"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    ()"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"CSSProperties"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ color"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," theme "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"==="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"dark"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"#f8f8f2"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"#282a36"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }),"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    [theme],"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"style"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{style}>children</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region local"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," LocalContext "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"createContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<{ index"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"number"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }>("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"!"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"List"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<{ items"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"ReactNode"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"[] }> "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"items"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"ul"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {items."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"map"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"item"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"index"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"LocalContext.Provider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"key"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"Math"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"random"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{{ index }}>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          {item}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"LocalContext.Provider"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ))}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"ul"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"NumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { index } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useContext"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(LocalContext)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ({index "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"+"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}) {children}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"UnnumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"children"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">{children}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," items "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ["))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UnnumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">hello</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UnnumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UnnumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">world</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"UnnumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">hello</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">world</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"NumberedItem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"List"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"items"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{items} />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion")))))),render:Object(c.b)(t.Fragment,null,Object(c.b)(t.Fragment,null,p.a)),mdxType:"Example"}),Object(c.b)("h3",{id:"performance"},"Performance",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#performance","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},Object(c.b)(N,Object.assign({parentName:"li"},{to:"/advanced-hooks#usecallback"},{mdxType:"Link"}),Object(c.b)("inlineCode",{parentName:"Link"},"useCallback"))," every event handler"),Object(c.b)("li",{parentName:"ul"},Object(c.b)(N,Object.assign({parentName:"li"},{to:"/advanced-hooks#usememo"},{mdxType:"Link"}),Object(c.b)("inlineCode",{parentName:"Link"},"useMemo"))," expensive computations"),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/react-api.html#reactmemo",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"memo"))," “don’t render this component unless props changed since the last render”"),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/react-api.html#reactpurecomponent",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"PureComponent"))," is ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/react-api.html#reactmemo",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"memo"))," for class components"),Object(c.b)("li",{parentName:"ul"},"test with ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/facebook/react/tree/master/packages/react-devtools-extensions",target:"_blank",rel:"noreferrer"}),"DevTools")," and/or ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/welldone-software/why-did-you-render",target:"_blank",rel:"noreferrer"}),"why-did-you-render")),Object(c.b)("li",{parentName:"ul"},"respect the ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update",target:"_blank",rel:"noreferrer"}),"change detector")," (",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is",target:"_blank",rel:"noreferrer"}),Object(c.b)("code",Object.assign({parentName:"a"},{className:"inline dracula","data-language":"ts","data-index":"0"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk3 mtki"}),"Object"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"."),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk9"}),"is"),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"code"},{className:"mtk1"}),")"))),")")),Object(c.b)(r,{link:"https://codesandbox.io/s/ufwkn?file=/src/example.tsx",testLink:"https://codesandbox.io/s/xs3mt?file=/src/example.tsx",style:{height:"18em"},code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"3"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  ChangeEventHandler,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  FC,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  memo,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useCallback,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useMemo,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  useState,"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," words "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ["))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"Lorem"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"ipsum"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"dolor"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"sit"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"amet"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"consectetur"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"adipiscing"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"elit"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),","))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"]"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Slower"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [filter, setFilter] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"''"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"aria-label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"filter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"placeholder"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"filter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{filter}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onChange"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"event"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setFilter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(event.target.value)}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"ul"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        {words"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          ."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"filter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"word"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," word."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toLowerCase"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"includes"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(filter."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toLowerCase"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()))"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          ."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"map"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"word"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"key"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{word}>{word}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          ))}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"ul"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ProbablyFaster"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"memo"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [filter, setFilter] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"''"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," onChange "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useCallback"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"ChangeEventHandler"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"HTMLInputElement"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">>("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    ("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"event"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setFilter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(event.target.value),"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    [],"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," filteredWords "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useMemo"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      words."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"filter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"word"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," word."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toLowerCase"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"includes"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(filter."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toLowerCase"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"())),"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    [filter],"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"aria-label"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"filter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"placeholder"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"filter"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{filter}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onChange"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{onChange}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      />"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"ul"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        {filteredWords."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"map"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"word"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"key"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{word}>{word}</"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"li"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        ))}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"ul"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"})"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"ProbablyFaster"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />")))))),render:Object(c.b)(t.Fragment,null,Object(c.b)(t.Fragment,null,b.a)),mdxType:"Example"}),Object(c.b)("h3",{id:"organization"},"Organization",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#organization","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"1 feature per directory"),Object(c.b)("li",{parentName:"ul"},"1 component per file"),Object(c.b)("li",{parentName:"ul"},"helper & tightly coupled components / hooks can be in same directory"),Object(c.b)("li",{parentName:"ul"},"keep business logic out of components")),Object(c.b)(r,{link:"https://codesandbox.io/s/8z9ip?file=/src/example.tsx",code:Object(c.b)(t.Fragment,null,Object(c.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"4"},Object(c.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, useEffect, useState } "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region tangled business logic"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"WithBusiness"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [result, setResult] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useEffect"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"fetch"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"my-business/api/resource.json"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      headers"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { that"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"a"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", component"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", not"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"worry"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", about"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"!"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," },"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"then"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"r"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," r."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"json"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// untyped interface"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"then"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(setResult)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// no error handling"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }, [])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <>display {result} here</>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"/**"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"@example"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," tests"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"```"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"describe('WithBusiness', () => {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  beforeEach(() => {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"    // no no"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"    jest.spyOn(window, 'fetch').mockRejectedValue(new Error())"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"})"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"```"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," */"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"//"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region separate business logic"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region my-api.ts"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Resource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  defined"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"interface"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"class"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3"}),"MyAPIImpl"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getResource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Promise"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"Resource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"throw"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6 mtkb"}),"new"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Error"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"not implemented"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," MyAPI "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6 mtkb"}),"new"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"MyAPIImpl"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"/**"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"@example"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," tests"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"```"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"describe('MyApi', () => {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  beforeEach(() => {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"    // the only place where this has to be done"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"    jest.spyOn(window, 'fetch').mockRejectedValue(new Error())"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"})"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"```"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," */"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region use-my-resource.ts"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useMyAPIResource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ()"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ["),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"unknown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Resource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [result, setResult] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"Resource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// typed"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [error, setError] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"unknown"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useEffect"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"let"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," shouldUpdate "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"true"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    MyAPI."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getResource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"then"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"r"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," shouldUpdate "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setResult"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(r))"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      ."),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"catch"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"e"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," shouldUpdate "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setError"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(e)) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// unified error handling"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      shouldUpdate "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"false"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    }"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }, [])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [error, result] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// clear interface that forces error handling"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region my-resource.tsx"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"WithoutBusiness"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [error, resource] "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useMyAPIResource"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (error) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <>oh no</>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (resource) "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <>here it is {resource.defined}</>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <>loading</>"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// it is much easier to mock either hook or api (don't mock both)"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"/**"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"@example"),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," tests"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"```"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"jest.mock('./use-my-api-resource')"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"const useMyAPIResourceMock = useMyAPIResource as jest.MockedFunction<"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  typeof useMyAPIResource"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),">"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"describe('WithoutBusiness', () => {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  beforeEach(() => {"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"    useMyAPIResourceMock.mockReturnValue([null, { defined: 'interface' }])"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"  })"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"})"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," * "),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"```"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"})," */"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(c.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(c.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion")))))),mdxType:"Example"}),Object(c.b)("h3",{id:"forms"},"Forms",Object(c.b)("a",Object.assign({parentName:"h3"},{href:"#forms","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"see ",Object(c.b)(N,Object.assign({parentName:"li"},{to:"/events-forms"},{mdxType:"Link"}),"Events & Forms")),Object(c.b)("li",{parentName:"ul"},Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/enaqx/awesome-react#forms",target:"_blank",rel:"noreferrer"}),"pick")," and use a ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/formium/formik",target:"_blank",rel:"noreferrer"}),"form library")),Object(c.b)("li",{parentName:"ul"},"when implementing form controls use ",Object(c.b)("a",Object.assign({parentName:"li"},{href:"https://reactjs.org/docs/forms.html#controlled-components",target:"_blank",rel:"noreferrer"}),Object(c.b)("inlineCode",{parentName:"a"},"value")," & ",Object(c.b)("inlineCode",{parentName:"a"},"onChange")))),Object(c.b)("style",{className:"grvsc-styles"},"\n  \n  .dracula {\n    color: #F8F8F2;\n    background-color: #282A36;\n  }\n  .dracula .mtkb { font-weight: bold; }\n  .dracula .mtki { font-style: italic; }\n  .dracula .mtk6 { color: #FF79C6; }\n  .dracula .mtk1 { color: #F8F8F2; }\n  .dracula .mtk11 { color: #E9F284; }\n  .dracula .mtk7 { color: #F1FA8C; }\n  .dracula .mtk3 { color: #8BE9FD; }\n  .dracula .mtk9 { color: #50FA7B; }\n  .dracula .mtk4 { color: #6272A4; }\n  .dracula .mtk8 { color: #FFB86C; }\n  .dracula .mtk5 { color: #BD93F9; }\n  .dracula .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n"))}g.isMDXComponent=!0}}]);
//# sourceMappingURL=f6fcbbbc-9345ec602178181502da.js.map