var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var s in e)c(a,s,{get:e[s],enumerable:!0})},i=(a,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of k(e))!g.call(a,l)&&l!==s&&c(a,l,{get:()=>e[l],enumerable:!(t=u(e,l))||t.enumerable});return a};var f=(a,e,s)=>(s=a!=null?m(N(a)):{},i(e||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),y=a=>i(c({},"__esModule",{value:!0}),a);var r=w((R,o)=>{o.exports=_jsx_runtime});var x={};b(x,{default:()=>h,frontmatter:()=>v});var n=f(r()),v={title:"React Suspense with Chantastic",subtitle:"Some awesome things I learned at a remote workshop with Michael Chan",date:"2019-10-16",description:"Figures a workshop on Suspense would leave me on the edge of my seat!\u{1F605}",tag:"Workshop"};function p(a){let e={a:"a",code:"code",div:"div",em:"em",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",path:"path",pre:"pre",span:"span",svg:"svg",...a.components},{BlockQuote:s,SmallAsterisk:t}=e;return s||d("BlockQuote",!0),t||d("SmallAsterisk",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[`Hey y\u2019all (most likely just me) but here\u2019s a high level overview of the things I learned from the remote `,(0,n.jsx)(e.a,{href:"https://egghead.io",rel:"noopener",target:"_blank",children:"egghead"}),` worskhop I attended today. `,(0,n.jsx)(e.a,{href:"https://github.com/chantastic/react-suspense-course",rel:"noopener",target:"_blank",children:"Here\u2019s a link to the repo"})]}),` `,(0,n.jsx)(e.p,{children:"TLDR;"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"What is React Suspense and why it matters"}),` `,(0,n.jsx)(e.li,{children:"React Suspense \u2014 the meat of the workshop"}),` `,(0,n.jsx)(e.li,{children:"Designing flexible components"}),` `,(0,n.jsx)(e.li,{children:"Nuggets picked up from the workshop"}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"what-is-react-suspense-and-why-it-matters",className:"title",children:[(0,n.jsx)(e.a,{tabIndex:"0",href:"#what-is-react-suspense-and-why-it-matters",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,viewBox:"0 0 16 16",height:"16",width:"16",children:(0,n.jsx)(e.path,{className:"fill-accent stroke-accent",fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"What Is React Suspense and Why It Matters"]}),` `,(0,n.jsx)(e.p,{children:`Prior to the advent of Webpack and other bundlers, code-splitting \u2014 the ability to \u201Csplit\u201D our JavaScript bundles into mutliple chunks \u2014 was something that was not possible. However, thanks to the aforementioned tools, code-splitting is a commonly used practice that helps to ensure that the JavaScript bundles that our users receive are as small as possible; this equates to better performance! We all know that the fastest code is no code\u2026 so less code means faster code \u{1F609}.`}),` `,(0,n.jsx)(e.p,{children:`For example if we have a Single Page Application (SPA), prior to React Suspense, a common practice was to use a package like`}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://github.com/jamiebuilds/react-loadable",rel:"noopener",target:"_blank",children:"React Loadable"}),` to handle splitting the various routes for said application*. It would be wasteful to load all the code for every route at initial load time/runtime because there could be several routes that a specific user never ends up actually visiting \u2014 what a waste \u{1F631}!`]}),` `,(0,n.jsx)(e.p,{children:`There is one thing that Suspense requires to work though: a cache! Currently, there is no stable caching pacakge for React, but don\u2019t you worry, the React team is working diligently on a package that will plug in and work with Suspense when it lands. Why do we need react cache? Simply put, Suspense needs to know if a promise has resolved so under the hood react cache will throw a thenable(promise) and until the thenable has resolved, Suspense will show sort of fallback.`}),` `,(0,n.jsx)(e.p,{children:`Chances are if you\u2019ve ever written a component that required data from some external resource, you\u2019ve made an API request for that data and you\u2019ve rendered your component with the data once it was fetched. However, once that component had unmounted and been destroyed, the data that was tied to that component went with it! If that component then would need to be mounted again, you\u2019d have to potentially make the same API request for the same data and while browsers have implemented caches for network requests, that doesn\u2019t really help with our components rendering! But with react cache, if the said data had been requested earlier the data will be available in the in memory cache and there will be no need to fetch the data from the network request \u{1F44D}.`}),` `,(0,n.jsx)(e.p,{children:`Once Suspsene and react-cache have stabilized, we will no longer need to worry about the logic regarding async resource loading!`}),` `,(0,n.jsx)(t,{children:(0,n.jsx)(e.p,{children:`*This is assuming that the SPA in question has multiple routes that users can reach.`})}),` `,(0,n.jsxs)(e.h2,{id:"react-suspense--the-meat-of-the-workshop",className:"title",children:[(0,n.jsx)(e.a,{tabIndex:"0",href:"#react-suspense--the-meat-of-the-workshop",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,viewBox:"0 0 16 16",height:"16",width:"16",children:(0,n.jsx)(e.path,{className:"fill-accent stroke-accent",fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"React Suspense \u2014 The Meat of the Workshop"]}),` `,(0,n.jsx)(e.p,{children:"I\u2019m just going to show the code and explain it below \u{1F601}."}),` `,(0,n.jsx)(e.div,{className:"custom-code-title",children:"pokemon.js"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," unstable_createResource ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," createResource ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react-cache"'}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PokemonResource"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"createResource"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"fetch"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"https://pokeapi.co/api/v2/pokemon/x"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"then"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"res"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," res",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"json"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"7",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Pokemon"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PokemonResource"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"read"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)("div",{children:(0,n.jsx)("br",{})}),` `,(0,n.jsx)(e.div,{className:"custom-code-title",children:"index.js"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ErrorBoundary"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"./error-boundary"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Pokemon"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"lazy"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"./pokemon"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"4",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"React.Fragment"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"ErrorBoundary"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fallback"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"...couldn't catch 'em all"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"React.Suspense"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fallback"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"Locating pokemon...",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Pokemon"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.h3,{id:"pokemonjs",className:"title",children:[(0,n.jsx)(e.a,{tabIndex:"0",href:"#pokemonjs",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,viewBox:"0 0 16 16",height:"16",width:"16",children:(0,n.jsx)(e.path,{className:"fill-accent stroke-accent",fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Pokemon.Js"]}),` `,(0,n.jsxs)(e.p,{children:["In this file we are creating and exporting a very simple component ",(0,n.jsx)(e.code,{children:"Pokemon"}),`. This component is meant to display some data in a `,(0,n.jsx)(e.code,{children:"div"}),` \u2014 not very inspired but that\u2019s not the point of this blog post and it wasn\u2019t the point of the workshop either.`]}),` `,(0,n.jsxs)(e.p,{children:["On line 4 we\u2019re using the ",(0,n.jsx)(e.code,{children:"createResource"}),` function that we imported from `,(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/react-cache",rel:"noopener",target:"_blank",children:"react-cache"}),` and providing it with a function as an argument. The caveat with the function argument is that it needs to return a thenable; luckily, the modern `,(0,n.jsx)(e.code,{children:"fetch"}),` implementation that ships with browsers or packages such as `,(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/axios",rel:"noopener",target:"_blank",children:"axios"}),` provide us with thenable implementations.`]}),` `,(0,n.jsxs)(e.p,{children:[`Remember what I said above, we need to provide Suspense with a component that will throw a thenable! Thanks to our `,(0,n.jsx)(e.code,{children:"createResource"}),` call, if we attempt to read from the resource with read prior to the promise being fulfilled, `,(0,n.jsx)(e.code,{children:"createResource"}),` will throw the promise and Suspsene will catch it and do what it will\u2026 in this case, show some sort of fallback component or text.`]}),` `,(0,n.jsxs)(e.h3,{id:"indexjs",className:"title",children:[(0,n.jsx)(e.a,{tabIndex:"0",href:"#indexjs",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,viewBox:"0 0 16 16",height:"16",width:"16",children:(0,n.jsx)(e.path,{className:"fill-accent stroke-accent",fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Index.Js"]}),` `,(0,n.jsxs)(e.p,{children:[`In this file, we see Suspense shine. There\u2019s two components that we need to be paying attention to here: `,(0,n.jsx)(e.code,{children:"ErrorBoundary"})," and ",(0,n.jsx)(e.code,{children:"React.Suspense"}),"."]}),` `,(0,n.jsxs)(e.h4,{id:"errorboundary",className:"title",children:[(0,n.jsx)(e.a,{tabIndex:"0",href:"#errorboundary",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,viewBox:"0 0 16 16",height:"16",width:"16",children:(0,n.jsx)(e.path,{className:"fill-accent stroke-accent",fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Errorboundary"]}),` `,(0,n.jsx)(e.p,{children:`We\u2019ll start our discussion here as this component is higher up in the tree. Remember how I mentioned above that Suspense expects the component it lazily loads to throw a thenable? Well ErrorBoundary is a component that when an error is thrown, it catches and responds to it. The reason why this component wraps our Suspense component is if for whatever reason our lazily loaded component(s) that Suspense wraps throws an error rather than returning a value or throwing a promise, we need a way for our UI to react to this. ErrorBoundary is the component that allows us to react!`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.em,{children:`Please not that ErrorBoundary cannot be a functional component \u2014 React requires it to currently be implemented via a class`})}),` `,(0,n.jsx)(e.div,{className:"custom-code-title",children:"ErrorBoundary.js"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"2",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"ErrorBoundary"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,n.jsxs)(e.span,{className:"token class-name",children:["React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"constructor"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"super"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"props",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"state"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"hasError"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"componentDidCatch"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:["error",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," errorInfo"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"hasError"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"14",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"state"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"hasError"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"fallback"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"19",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"children"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"23",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ErrorBoundary"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"defaultProps"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"fallback"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Something went wrong."}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.h2,{id:"designing-flexible-components",className:"title",children:[(0,n.jsx)(e.a,{tabIndex:"0",href:"#designing-flexible-components",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,viewBox:"0 0 16 16",height:"16",width:"16",children:(0,n.jsx)(e.path,{className:"fill-accent stroke-accent",fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Designing Flexible Components"]}),` `,(0,n.jsx)(e.p,{children:`A big piece of knowledge/wisdom I was able to pick up from this workshop regards components in the post react age.`}),` `,(0,n.jsx)(s,{children:"Each component should have one specific intent"}),` `,(0,n.jsx)(e.p,{children:`What this means to me is that a button component\u2019s intent is to fire off some click event once clicked; we leave it up to the user of the component to decide what this click event will be. If we abstract this idea out even further, if we have a component that is responsible for rendering a list of data, we should allow the user of this component to dictate what the rendering function will look like for a data item.`}),` `,(0,n.jsx)(e.div,{className:"custom-code-title",children:"index.js"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PokemonList"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"./PokemonList.js"'}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"PokemonList"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"7",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"as"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"ul",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"8",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"renderItem"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token parameter",children:"pokemon"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]})]})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"9",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"li"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"pokemon",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]})})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"10",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"alert"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"You selected "}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"pokemon",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]})})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"11",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"pokemon",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]})})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"12",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]})})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"13",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})})}),(0,n.jsx)(e.span,{className:"code-line line-number highlight-line",line:"14",children:(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.div,{className:"custom-code-title",children:"PokemonList.js"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," unstable_createResource ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," createResource ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react-cache"'}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PokemonCollection"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"createResource"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"fetch"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"https://pokeapi.co/api/v2/pokemon"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"then"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"res"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," res",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"json"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"7",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PokemonList"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"As"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Fragment"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"renderItem"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token parameter",children:"pokemon"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"pokemon",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"pokemon",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),`restProps `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number highlight-line",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"As"})]})," ",(0,n.jsxs)(e.span,{className:"token spread",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"restProps",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PokemonCollection"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"read"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"results"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"renderItem",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Notice how on line 8 of ",(0,n.jsx)(e.code,{children:"index.js"}),` we have provided a renderItem property to the `,(0,n.jsx)(e.code,{children:"PokemonList"}),` component. This type of inversion of control is called, at least to the best of my recollection, dependency injection. Michael\u2019s feelings are that any components that are iterable or iterate over some data should provide a capability for its users to override the default rendering behavior for each item. That\u2019s what the highlighted line in `,(0,n.jsx)(e.code,{children:"PokemonList.js"}),` is doing! As shown on line 12, the renderItem attribute on props, which defaults to a function, allows a user to define their own map function.`]}),` `,(0,n.jsxs)(e.p,{children:["Another nice thing that ",(0,n.jsx)(e.code,{children:"PokemonList"}),` allows its users to do is decide what the base container component should be; that\u2019s what the `,(0,n.jsx)(e.code,{children:"as"}),` property is! Similar to what is done in styled components, we can say that a component should render itself \u201Cas\u201D another valid JSX component.`]}),` `,(0,n.jsx)(e.p,{children:`This kind of thinking when designing components will help the developer who has to create resources (functions and components in React which are actually just functions) that start general but allow for specificity.`}),` `,(0,n.jsxs)(e.h2,{id:"little-nuggets-from-the-workshop",className:"title",children:[(0,n.jsx)(e.a,{tabIndex:"0",href:"#little-nuggets-from-the-workshop",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,viewBox:"0 0 16 16",height:"16",width:"16",children:(0,n.jsx)(e.path,{className:"fill-accent stroke-accent",fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Little Nuggets from the Workshop"]}),` `,(0,n.jsx)(e.p,{children:`At the end of the workshop, Chantastic invited us all to ask some questions and like most question and answer segements, this one was ripe with golden nuggets. The following are 4 libraries that Micahel Chan (Chantastic) recommends to teams he works with:`}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://ui.reach.tech/",rel:"noopener",target:"_blank",children:"ReachUI"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://reactrouter.com/en/main",rel:"noopener",target:"_blank",children:"React Router"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://egghead.io/courses/immutable-javascript-data-structures-with-immer",rel:"noopener",target:"_blank",children:"Immer"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd",rel:"noopener",target:"_blank",children:"react-beautiful-dnd"})}),` `]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(p,{...a})}):p(a)}function d(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(x);})(); ;return Component;

Today I learned about... workshop

Back to all tags

React Suspense with Chantastic

Blog post about: Some awesome things I learned at a remote workshop with Michael Chan

Today I learned about...
workshop