[{"_1":2,"_89":-5,"_90":-5},"loaderData",{"_3":4,"_35":36},"root",{"_5":6,"_15":16,"_21":22,"_27":28},"ENV",{"_7":8,"_9":10,"_11":12,"_13":14},"MODE","production","SENTRY_DSN","https://4e34045e065e0a3ef57135ae5020f388@o4506001960468480.ingest.sentry.io/4506001960599552","AMPLITUDE_INIT","12e15cca4c978dad4bb7dc430e747471","CONVERT_KIT_FORM_ID","7241351","requestInfo",{"_17":18},"userPreferences",{"_19":20},"theme","light","newsLetterData",{"_23":24,"_25":26},"newsletterImage","https://res.cloudinary.com/dinypqsgl/image/upload/f_webp/c_scale,h_500,w_500/b_transparent/r_max/v1/blog/me?_a=DATAg1eAZAA0","showNewsLetter",true,"honeypotInputProps",{"_29":30,"_31":32,"_33":34},"nameFieldName","name__confirm","validFromFieldName","from__confirm","encryptedValidFrom","a9A/bhhs38qNCaALsEx8GK0tM34vNcaZMIKPWJ8ZTzbmuoQXHjHIeOk=","routes/tags.$slug",{"_37":38,"_78":79,"_87":88},"blogList",[39],{"_40":41,"_42":43,"_56":57,"_66":67,"_76":77},"code","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\",hero:\"https://res.cloudinary.com/dinypqsgl/image/upload/v1743803333/blog/02-chantastic-suspense/react-suspense_ldfdx1.png\"};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\nlearned from the remote `,(0,n.jsx)(e.a,{href:\"https://egghead.io\",rel:\"noopener\",target:\"_blank\",children:\"egghead\"}),` worskhop I attended today.\n`,(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\"})]}),`\n`,(0,n.jsx)(e.p,{children:\"TLDR;\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"What is React Suspense and why it matters\"}),`\n`,(0,n.jsx)(e.li,{children:\"React Suspense \\u2014 the meat of the workshop\"}),`\n`,(0,n.jsx)(e.li,{children:\"Designing flexible components\"}),`\n`,(0,n.jsx)(e.li,{children:\"Nuggets picked up from the workshop\"}),`\n`]}),`\n`,(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\"]}),`\n`,(0,n.jsx)(e.p,{children:`Prior to the advent of Webpack and other bundlers, code-splitting \\u2014 the ability\nto \\u201Csplit\\u201D our JavaScript bundles into mutliple chunks \\u2014 was something that was\nnot possible. However, thanks to the aforementioned tools, code-splitting is a\ncommonly used practice that helps to ensure that the JavaScript bundles that our\nusers receive are as small as possible; this equates to better performance! We\nall know that the fastest code is no code\\u2026 so less code means faster code \\u{1F609}.`}),`\n`,(0,n.jsx)(e.p,{children:`For example if we have a Single Page Application (SPA), prior to React Suspense,\na common practice was to use a package like`}),`\n`,(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\nsplitting the various routes for said application*. It would be wasteful to\nload all the code for every route at initial load time/runtime because there\ncould be several routes that a specific user never ends up actually visiting \\u2014\nwhat a waste \\u{1F631}!`]}),`\n`,(0,n.jsx)(e.p,{children:`There is one thing that Suspense requires to work though: a cache! Currently,\nthere is no stable caching pacakge for React, but don\\u2019t you worry, the React\nteam is working diligently on a package that will plug in and work with Suspense\nwhen it lands. Why do we need react cache? Simply put, Suspense needs to know if\na promise has resolved so under the hood react cache will throw a\nthenable(promise) and until the thenable has resolved, Suspense will show sort\nof fallback.`}),`\n`,(0,n.jsx)(e.p,{children:`Chances are if you\\u2019ve ever written a component that required data from some\nexternal resource, you\\u2019ve made an API request for that data and you\\u2019ve rendered\nyour component with the data once it was fetched. However, once that component\nhad unmounted and been destroyed, the data that was tied to that component went\nwith it! If that component then would need to be mounted again, you\\u2019d have to\npotentially make the same API request for the same data and while browsers have\nimplemented caches for network requests, that doesn\\u2019t really help with our\ncomponents rendering! But with react cache, if the said data had been requested\nearlier the data will be available in the in memory cache and there will be no\nneed to fetch the data from the network request \\u{1F44D}.`}),`\n`,(0,n.jsx)(e.p,{children:`Once Suspsene and react-cache have stabilized, we will no longer need to worry\nabout the logic regarding async resource loading!`}),`\n`,(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\nreach.`})}),`\n`,(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\"]}),`\n`,(0,n.jsx)(e.p,{children:\"I\\u2019m just going to show the code and explain it below \\u{1F601}.\"}),`\n`,(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\"'}),`\n`]}),(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\"'}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"3\",children:`\n`}),(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:\"=>\"}),`\n`]}),(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:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"6\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"7\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\"\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"10\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(0,n.jsx)(\"div\",{children:(0,n.jsx)(\"br\",{})}),`\n`,(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\"'}),`\n`]}),(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\"'}),`\n`]}),(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:\")\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"4\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\"(\"}),`\n`]}),(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:`\n`})]}),(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:`\n`})]}),(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:`\n`})]}),(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:`\n`})]}),(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:`\n`})]}),(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:`\n`})]}),(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:\"\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"14\",children:[\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"15\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(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\"]}),`\n`,(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\"}),`.\nThis component is meant to display some data in a `,(0,n.jsx)(e.code,{children:\"div\"}),` \\u2014 not very inspired but\nthat\\u2019s not the point of this blog post and it wasn\\u2019t the point of the workshop\neither.`]}),`\n`,(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\n`,(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\nfunction as an argument. The caveat with the function argument is that it needs\nto return a thenable; luckily, the modern `,(0,n.jsx)(e.code,{children:\"fetch\"}),` implementation that ships with\nbrowsers or packages such as `,(0,n.jsx)(e.a,{href:\"https://www.npmjs.com/package/axios\",rel:\"noopener\",target:\"_blank\",children:\"axios\"}),`\nprovide us with thenable implementations.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`Remember what I said above, we need to provide Suspense with a component that\nwill throw a thenable! Thanks to our `,(0,n.jsx)(e.code,{children:\"createResource\"}),` call, if we attempt to\nread from the resource with read prior to the promise being fulfilled,\n`,(0,n.jsx)(e.code,{children:\"createResource\"}),` will throw the promise and Suspsene will catch it and do what\nit will\\u2026 in this case, show some sort of fallback component or text.`]}),`\n`,(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\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`In this file, we see Suspense shine. There\\u2019s two components that we need to be\npaying attention to here: `,(0,n.jsx)(e.code,{children:\"ErrorBoundary\"}),\" and \",(0,n.jsx)(e.code,{children:\"React.Suspense\"}),\".\"]}),`\n`,(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\"]}),`\n`,(0,n.jsx)(e.p,{children:`We\\u2019ll start our discussion here as this component is higher up in the tree.\nRemember how I mentioned above that Suspense expects the component it lazily\nloads to throw a thenable? Well ErrorBoundary is a component that when an error\nis thrown, it catches and responds to it. The reason why this component wraps\nour Suspense component is if for whatever reason our lazily loaded component(s)\nthat Suspense wraps throws an error rather than returning a value or throwing a\npromise, we need a way for our UI to react to this. ErrorBoundary is the\ncomponent that allows us to react!`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.em,{children:`Please not that ErrorBoundary cannot be a functional component \\u2014 React\nrequires it to currently be implemented via a class`})}),`\n`,(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\"'}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"2\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\"{\"}),`\n`]}),(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:\")\"}),`\n`]}),(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:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"7\",children:[\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"8\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\"{\"}),`\n`]}),(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:\",\"}),`\n`]}),(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:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"13\",children:[\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"14\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\"{\"}),`\n`]}),(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\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"18\",children:[\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"19\",children:`\n`}),(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\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"21\",children:[\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"22\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"23\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"26\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(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\"]}),`\n`,(0,n.jsx)(e.p,{children:`A big piece of knowledge/wisdom I was able to pick up from this workshop regards\ncomponents in the post react age.`}),`\n`,(0,n.jsx)(s,{children:\"Each component should have one specific intent\"}),`\n`,(0,n.jsx)(e.p,{children:`What this means to me is that a button component\\u2019s intent is to fire off some\nclick event once clicked; we leave it up to the user of the component to decide\nwhat this click event will be. If we abstract this idea out even further, if we\nhave a component that is responsible for rendering a list of data, we should\nallow the user of this component to dictate what the rendering function will\nlook like for a data item.`}),`\n`,(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\"'}),`\n`]}),(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\"'}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"3\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\"(\"}),`\n`]}),(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\"})]}),`\n`]})]}),(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:'\"'})]}),`\n`]})}),(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:\"(\"}),`\n`]})]})}),(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:`\n`})]})})}),(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:`\n`})]})})}),(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:`\n`})]})})}),(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:`\n`})]})})}),(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:\"\"})]}),`\n`]})})}),(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:\"}\"})]}),`\n`]})}),(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:\"/>\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"16\",children:[\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"17\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(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\"'}),`\n`]}),(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\"'}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"3\",children:`\n`}),(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:\"=>\"}),`\n`]}),(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:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"6\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line line-number\",line:\"7\",children:`\n`}),(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:\"{\"}),`\n`]}),(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:\",\"}),`\n`]}),(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:\",\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"11\",children:[\" \",(0,n.jsx)(e.span,{className:\"token spread operator\",children:\"...\"}),`restProps\n`]}),(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:\"{\"}),`\n`]}),(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:\"(\"}),`\n`]}),(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:\"\"})]}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"15\",children:[\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line line-number\",line:\"16\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(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\n`,(0,n.jsx)(e.code,{children:\"PokemonList\"}),` component. This type of inversion of control is called, at least\nto the best of my recollection, dependency injection. Michael\\u2019s feelings are\nthat any components that are iterable or iterate over some data should provide a\ncapability for its users to override the default rendering behavior for each\nitem. That\\u2019s what the highlighted line in `,(0,n.jsx)(e.code,{children:\"PokemonList.js\"}),` is doing! As shown on\nline 12, the renderItem attribute on props, which defaults to a function, allows\na user to define their own map function.`]}),`\n`,(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\nbase container component should be; that\\u2019s what the `,(0,n.jsx)(e.code,{children:\"as\"}),` property is! Similar to\nwhat is done in styled components, we can say that a component should render\nitself \\u201Cas\\u201D another valid JSX component.`]}),`\n`,(0,n.jsx)(e.p,{children:`This kind of thinking when designing components will help the developer who has\nto create resources (functions and components in React which are actually just\nfunctions) that start general but allow for specificity.`}),`\n`,(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\"]}),`\n`,(0,n.jsx)(e.p,{children:`At the end of the workshop, Chantastic invited us all to ask some questions and\nlike most question and answer segements, this one was ripe with golden nuggets.\nThe following are 4 libraries that Micahel Chan (Chantastic) recommends to teams\nhe works with:`}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://ui.reach.tech/\",rel:\"noopener\",target:\"_blank\",children:\"ReachUI\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://reactrouter.com/en/main\",rel:\"noopener\",target:\"_blank\",children:\"React Router\"})}),`\n`,(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\"})}),`\n`,(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\"})}),`\n`]})]})}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);})();\n;return Component;","frontmatter",{"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55},"date","2019-10-16T00:00:00.000Z","description","Figures a workshop on Suspense would leave me on the edge of my seat!😅","hero","https://res.cloudinary.com/dinypqsgl/image/upload/v1743803333/blog/02-chantastic-suspense/react-suspense_ldfdx1.png","subtitle","Some awesome things I learned at a remote workshop with Michael Chan","tag","workshop","title","React Suspense with Chantastic","matter",{"_58":59,"_60":61,"_62":63,"_64":65},"data",{"_52":53,"_54":55,"_44":45,"_46":47,"_48":49,"_50":51},"excerpt","","isEmpty",false,"content","\nHey y'all (most likely just me) but here's a high level overview of the things I\nlearned from the remote [egghead](https://egghead.io) worskhop I attended today.\n[Here's a link to the repo](https://github.com/chantastic/react-suspense-course)\n\nTLDR;\n\n1. What is React Suspense and why it matters\n2. React Suspense -- the meat of the workshop\n3. Designing flexible components\n4. Nuggets picked up from the workshop\n\n## What is React Suspense and why it matters\n\nPrior to the advent of Webpack and other bundlers, code-splitting -- the ability\nto \"split\" our JavaScript bundles into mutliple chunks -- was something that was\nnot possible. However, thanks to the aforementioned tools, code-splitting is a\ncommonly used practice that helps to ensure that the JavaScript bundles that our\nusers receive are as small as possible; this equates to better performance! We\nall know that the fastest code is no code... so less code means faster code 😉.\n\nFor example if we have a Single Page Application (SPA), prior to React Suspense,\na common practice was to use a package like\n\n[React Loadable](https://github.com/jamiebuilds/react-loadable) to handle\nsplitting the various routes for said application\\*. It would be wasteful to\nload all the code for every route at initial load time/runtime because there\ncould be several routes that a specific user never ends up actually visiting --\nwhat a waste 😱!\n\nThere is one thing that Suspense requires to work though: a cache! Currently,\nthere is no stable caching pacakge for React, but don't you worry, the React\nteam is working diligently on a package that will plug in and work with Suspense\nwhen it lands. Why do we need react cache? Simply put, Suspense needs to know if\na promise has resolved so under the hood react cache will throw a\nthenable(promise) and until the thenable has resolved, Suspense will show sort\nof fallback.\n\nChances are if you've ever written a component that required data from some\nexternal resource, you've made an API request for that data and you've rendered\nyour component with the data once it was fetched. However, once that component\nhad unmounted and been destroyed, the data that was tied to that component went\nwith it! If that component then would need to be mounted again, you'd have to\npotentially make the same API request for the same data and while browsers have\nimplemented caches for network requests, that doesn't really help with our\ncomponents rendering! But with react cache, if the said data had been requested\nearlier the data will be available in the in memory cache and there will be no\nneed to fetch the data from the network request 👍.\n\nOnce Suspsene and react-cache have stabilized, we will no longer need to worry\nabout the logic regarding async resource loading!\n\n\n\t*This is assuming that the SPA in question has multiple routes that users can\n\treach.\n\n\n## React Suspense -- the meat of the workshop\n\nI'm just going to show the code and explain it below 😁.\n\n```jsx:title=pokemon.js\nimport React from \"react\"\nimport { unstable_createResource as createResource } from \"react-cache\"\n\nlet PokemonResource = createResource(() =>\n fetch(\"https://pokeapi.co/api/v2/pokemon/x\").then(res => res.json())\n)\n\nexport default function Pokemon() {\n return

{PokemonResource.read().name}

\n}\n```\n\n

\n\t
\n

\n\n```jsx:title=index.js\nimport React from \"react\"\nimport ErrorBoundary from \"./error-boundary\"\nconst Pokemon = React.lazy(() => import(\"./pokemon\"))\n\nexport default function() {\n return (\n \n ...couldn't catch 'em all}>\n \n \n \n \n \n )\n}\n```\n\n### pokemon.js\n\nIn this file we are creating and exporting a very simple component `Pokemon`.\nThis component is meant to display some data in a `div` -- not very inspired but\nthat's not the point of this blog post and it wasn't the point of the workshop\neither.\n\nOn line 4 we're using the `createResource` function that we imported from\n[react-cache](https://www.npmjs.com/package/react-cache) and providing it with a\nfunction as an argument. The caveat with the function argument is that it needs\nto return a thenable; luckily, the modern `fetch` implementation that ships with\nbrowsers or packages such as [axios](https://www.npmjs.com/package/axios)\nprovide us with thenable implementations.\n\nRemember what I said above, we need to provide Suspense with a component that\nwill throw a thenable! Thanks to our `createResource` call, if we attempt to\nread from the resource with read prior to the promise being fulfilled,\n`createResource` will throw the promise and Suspsene will catch it and do what\nit will... in this case, show some sort of fallback component or text.\n\n### index.js\n\nIn this file, we see Suspense shine. There's two components that we need to be\npaying attention to here: `ErrorBoundary` and `React.Suspense`.\n\n#### ErrorBoundary\n\nWe'll start our discussion here as this component is higher up in the tree.\nRemember how I mentioned above that Suspense expects the component it lazily\nloads to throw a thenable? Well ErrorBoundary is a component that when an error\nis thrown, it catches and responds to it. The reason why this component wraps\nour Suspense component is if for whatever reason our lazily loaded component(s)\nthat Suspense wraps throws an error rather than returning a value or throwing a\npromise, we need a way for our UI to react to this. ErrorBoundary is the\ncomponent that allows us to react!\n\n_Please not that ErrorBoundary cannot be a functional component -- React\nrequires it to currently be implemented via a class_\n\n```jsx:title=ErrorBoundary.js\nimport React from \"react\"\n\nexport default class ErrorBoundary extends React.Component {\n constructor(props) {\n super(props)\n this.state = { hasError: false }\n }\n\n componentDidCatch(error, errorInfo) {\n this.setState({\n hasError: true,\n })\n }\n\n render() {\n if (this.state.hasError) {\n return this.props.fallback\n }\n\n return this.props.children\n }\n}\n\nErrorBoundary.defaultProps = {\n fallback:

Something went wrong.

,\n}\n```\n\n## Designing flexible components\n\nA big piece of knowledge/wisdom I was able to pick up from this workshop regards\ncomponents in the post react age.\n\n

Each component should have one specific intent

\n\nWhat this means to me is that a button component's intent is to fire off some\nclick event once clicked; we leave it up to the user of the component to decide\nwhat this click event will be. If we abstract this idea out even further, if we\nhave a component that is responsible for rendering a list of data, we should\nallow the user of this component to dictate what the rendering function will\nlook like for a data item.\n\n```jsx:title=index.js {8-14}\nimport React from \"react\"\nimport { PokemonList } from \"./PokemonList.js\"\n\nfunction App(props) {\n return (\n (\n

\n \n

\n )}\n />\n )\n}\n```\n\n```jsx:title=PokemonList.js {13}\nimport React from \"react\"\nimport { unstable_createResource as createResource } from \"react-cache\"\n\nlet PokemonCollection = createResource(() =>\n fetch(\"https://pokeapi.co/api/v2/pokemon\").then(res => res.json())\n)\n\nexport function PokemonList({\n as: As = React.Fragment,\n renderItem = pokemon =>

{pokemon.name}

,\n ...restProps\n}) {\n return (\n {PokemonCollection.read().results.map(renderItem)}\n )\n}\n```\n\nNotice how on line 8 of `index.js` we have provided a renderItem property to the\n`PokemonList` component. This type of inversion of control is called, at least\nto the best of my recollection, dependency injection. Michael's feelings are\nthat any components that are iterable or iterate over some data should provide a\ncapability for its users to override the default rendering behavior for each\nitem. That's what the highlighted line in `PokemonList.js` is doing! As shown on\nline 12, the renderItem attribute on props, which defaults to a function, allows\na user to define their own map function.\n\nAnother nice thing that `PokemonList` allows its users to do is decide what the\nbase container component should be; that's what the `as` property is! Similar to\nwhat is done in styled components, we can say that a component should render\nitself \"as\" another valid JSX component.\n\nThis kind of thinking when designing components will help the developer who has\nto create resources (functions and components in React which are actually just\nfunctions) that start general but allow for specificity.\n\n## Little nuggets from the workshop\n\nAt the end of the workshop, Chantastic invited us all to ask some questions and\nlike most question and answer segements, this one was ripe with golden nuggets.\nThe following are 4 libraries that Micahel Chan (Chantastic) recommends to teams\nhe works with:\n\n1. [ReachUI](https://ui.reach.tech/)\n2. [React Router](https://reactrouter.com/en/main)\n3. [Immer](https://egghead.io/courses/immutable-javascript-data-structures-with-immer)\n4. [react-beautiful-dnd](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)\n","readTime",{"_68":69,"_70":71,"_72":73,"_74":75},"minutes",7.03,"text","8 min read","time",421800,"words",1406,"slug","02-suspense-chantastic","retObject",[80,86],[81],{"_42":82,"_56":83,"_66":85,"_76":77,"_40":41},{"_54":55,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53},{"_62":63,"_64":65,"_58":84,"_60":61},{"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55},{"_68":69,"_70":71,"_72":73,"_74":75},[],"tilList",[],"actionData","errors"]

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