{PokemonResource.read().name}

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

\n
\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","data",{"_58":59,"_50":51,"_52":53,"_54":55,"_56":57},"excerpt","","isEmpty","readTime",{"_71":72,"_73":74,"_75":76,"_77":78},"minutes",7.02,"text","8 min read","time",421200,"words",1404,"slug","02-suspense-chantastic","retObject",[83,89],[84],{"_46":47,"_48":85,"_60":86,"_69":88,"_79":80},{"_52":53,"_54":55,"_56":57,"_58":59,"_50":51},{"_62":63,"_64":87,"_66":67,"_68":26},{"_52":53,"_54":55,"_56":57,"_58":59,"_50":51},{"_71":72,"_73":74,"_75":76,"_77":78},[],"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