var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},c=(a,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of u(e))!m.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return a};var N=(a,e,l)=>(l=a!=null?b(v(a)):{},c(e||!a||!a.__esModule?r(l,"default",{value:a,enumerable:!0}):l,a)),C=a=>c(r({},"__esModule",{value:!0}),a);var i=y((E,t)=>{t.exports=_jsx_runtime});var D={};k(D,{default:()=>h,frontmatter:()=>f});var n=N(i()),f=void 0;function d(a){let e={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",span:"span",...a.components},{EpicVideo:l}=e;return l||w("EpicVideo",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:"Shared Context"}),` `,(0,n.jsx)(l,{url:"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-shared-context"}),` `,(0,n.jsx)(e.p,{children:"Let's say you have the following custom hook:"}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useCount"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," [",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"setCount"}),"] ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useState"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"0"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"increment"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," () ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"setCount"}),"((",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"c"}),") ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"c"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"+"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"1"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"increment"})," }",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:["}",` `]})]})}),` `,(0,n.jsx)(e.p,{children:"Then, you have two components, one to display the count and another to increment it:"}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"DisplayCount"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"})," } ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useCount"}),"()",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:["}",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"5",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"IncrementCount"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"increment"})," } ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useCount"}),"()",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"button"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"increment"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">Increment",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:["}",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"10",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"App"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"DisplayCount"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"IncrementCount"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17",children:[" )",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18",children:["}",` `]})]})}),` `,(0,n.jsxs)(e.p,{children:[`If you tried that you'd find that clicking the increment button doesn't work. That's because each component is creating its own instance of the state in the `,(0,n.jsx)(e.code,{children:"useCount"}),` hook, so they're not sharing the same state. In fact, even if you call the hook multiple times in the same component, you'd still get different instances of the state.`]}),` `,(0,n.jsx)(e.p,{children:`Often this is what you want. You want the isolation. But sometimes, you want to have that state be shared between the components.`}),` `,(0,n.jsxs)(e.p,{children:[`Often you solve this problem by `,(0,n.jsx)(e.a,{href:"https://react.dev/learn/sharing-state-between-components",children:"lifting state"}),`, but sometimes that's not very practical because you're many layers away from the components that need to share the state or perhaps there's a router involved and you aren't the one rendering the components and don't have an easy way to pass props down.`]}),` `,(0,n.jsx)(e.p,{children:`Another situation where you would use this is if you wanted to implicitely share state between components so consumers of those components can use them without having to know about the state. This is a pattern known as "Compound Components" and we'll learn more about that in the Compound Components exercise of the Advanced React Patterns workshop.`}),` `,(0,n.jsxs)(e.p,{children:[`In these cases, you can use `,(0,n.jsx)(e.a,{href:"https://react.dev/reference/react/createContext",children:"context"}),`. React router actually has a built-in feature that allows you to pass state into context and access that value in child routes called `,(0,n.jsx)(e.a,{href:"https://reactrouter.com/en/main/hooks/use-outlet-context",children:(0,n.jsx)(e.code,{children:"outletContext"})}),` and in my apps this is what I use most of the time. However, sometimes I do still reach for context.`]}),` `,(0,n.jsx)(e.p,{children:"Here's how you would use context to share state between components:"}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"import"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"createContext"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"use"})," } ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"from"})," ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"react"}),"'",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"2",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"type"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"CountContextType"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0C)"},children:"number"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"increment"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," () ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0C)"},children:"void"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:["}",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"CountContext"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"createContext"}),"<",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"CountContextType"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"|"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0C)"},children:"null"}),">(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"null"}),")",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"8",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"CountProvider"}),"({ ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"children"})," }",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ReactNode"})," }) {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," [",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"setCount"}),"] ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useState"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"0"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"increment"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," () ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"setCount"}),"((",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"c"}),") ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"c"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"+"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"1"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"value"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"increment"})," }",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"CountContext"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14",children:["}",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"15",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useCount"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"context"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"CountContext"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"if"})," (",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"!"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"context"}),") {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"throw"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"new"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"Error"}),"(","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"useCount must be used within a CountProvider"}),"'",")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"20",children:[" }",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"21",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"context"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22",children:["}",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"23",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"24",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"DisplayCount"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"25",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"})," } ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useCount"}),"()",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"26",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"27",children:["}",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"28",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"29",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"IncrementCount"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"30",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"increment"})," } ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useCount"}),"()",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"31",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"button"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"increment"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">Increment",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"32",children:["}",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"33",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"34",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"App"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"35",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"36",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"CountProvider"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"37",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"38",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"DisplayCount"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"39",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"IncrementCount"})," />",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"40",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"41",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"42",children:[" )",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"43",children:["}",` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"CountProvider"}),` component is a context provider. It's a component that handles the state and provides it to the components that need it. The `,(0,n.jsx)(e.code,{children:"useCount"}),` hook is a custom hook that uses the `,(0,n.jsx)(e.code,{children:"use"}),` hook to access the context. The `,(0,n.jsx)(e.code,{children:"DisplayCount"})," and ",(0,n.jsx)(e.code,{children:"IncrementCount"})," components are the consumers of the context."]}),` `,(0,n.jsxs)(e.p,{children:["Whenever the ",(0,n.jsx)(e.code,{children:"value"}),` prop of the context provider changes, all the components that consume the context value will rerender to get those updates. And they will all be referencing the same state.`]}),` `,(0,n.jsxs)(e.p,{children:[`Providers can be nested and the closest provider to the consuming component will be the one that provides the value. If there is no provider, the default value will be used. In this case, the default value is `,(0,n.jsx)(e.code,{children:"null"}),` and we throw an error if the hook is used without a provider. This is generally a good practice, but there are use cases where you might want to provide a default value. You'll know when you need to do that, but most of the time you'll want to require a context provider.`]}),` `,(0,n.jsx)("callout-warning",{children:(0,n.jsxs)(e.p,{children:["If you work in a React app on ",(0,n.jsx)(e.code,{children:"<= 18.2"}),", you'll use ",(0,n.jsx)(e.code,{children:"useContext"}),` instead of the more vercitile `,(0,n.jsx)(e.code,{children:"use"}),` hook. In the workshop we're using an experimental version of React that has this feature.`]})})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function w(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(D);})(); ;return Component;

04. Shared Context/Elaboration