The React Show

Dan Abramov has an updated Beta React Effects Guide. In this episode we go through and see what the designers of React think about effects and how to correctly use them in React 18 and we take a look at user reactions.Beta React Effects GuideTwitter React ShowSupport the show

The challenge: forms suck in React today, can we design a better way to work with forms in React?LinksTwitter Owl CreekSource Code From EpisodeSupport the show

Support the show

Twitter: @TheReactShowFoundations of High Performance React 30% off with code REACTSHOW on LeanpubWhat actually is routing in React? In this episode we look at what React routing is, and how it can be used not only for the traditional tasks but for a whole lot more.Support the show

LinksTwitter - The React ShowYouTubeFoundations of High Performance ReactSupport the show

LinksTwitter - The React ShowTwitter - Thomas HintzYouTubeResourcesReact 18 Release PostReact 18 Upgrade GuideShow NotesMajor New Features Concurrency! Mostly an implementation detail but powers many of the features.Interruptible renders! Better/smoother UI UXReact can abandon and resume renders.Upcoming minor release will include Offscreen component for that allows restoring previous screens in the same state or even rendering a screen in the background.Breaking changes? Concurrent rendering is technically a breaking changeOnly enabled in parts of your app that use new featuresBenefits will take some time to realize, like waiting on library authorsSuspense in Data FrameworksServer Components, still in developmentAutomatic BatchingPrioritized updates / AKA "transitions"Suspense On The ServerStrict Mode developer featuresuseTransition mark state updates as non-urgentuseDeferredValue an upgrade over debouncing, an interruptible render that doesn't block user inputuseSyncExternalStore for libs, removes the needs to use useEffect when implementing subscriptionsuseInsertionEffect for libs, helps with CSS-in-JS lib performance issuesHow to upgrade: install React 18 via npmchange ReactDOM.render to ReactDOM/client.createRoot (unmountComponentAtNode is also updated)callback is removed from render use useEffect or similar instead depending on use caseIf using SSR with hydration change hydrate to hydrateRootState of React 18 & Reported issues:Should you upgrade? Or when should you upgrade?Support the show

Is it possible to build your React app right the first time? Or do you get annoyed with having to re-do things when it turns out we didn’t actually understand what users wanted? Or do you just want to make more money by creating happier users? On this episode we’ll work through methods to save time, effort, and actually build what the user wants.LinksEpisode PageTwitter Owl CreekTwitter Thomas HintzYouTubeResourcesEvolutionary PrototypingSupport the show

Is React the final answer? Is it possible today to take React’s shortcomings to create something better than React?LinksTwitter Owl CreekTwitter Thomas HintzYouTubeSupport the show

How does the JavaScript that powers your React app actually get run in the browser? How does React take advantage of the browser execution model? In this episode we talk about what actually happens when your JavaScript source code gets sent to a browser and it executes it going into detail about every step in the pipeline.Support the show

As new technology emerges in your technical stack, it’s important to not only learn them in theory, but to find practical ways to implement the knowledge you’re learning. You could either spend your time making another Todo List or Tic Tac Toe implementation, or dive into a rapidly expanding eCommerce market with the new Shopify Hydrogen Framework, built on upcoming React 18 Features like React Server Components.LinksEpisode PageTwitter Owl CreekTwitter Thomas HintzShow NotesKeeping Ahead of the Hiring CurvePractice makes PerfectStory Time on “Practice” React Applications we MadeTransition: Making the Practical even more PracticalCapitalizing on the eCommerce Industryhttps://acquireconvert.com/shopify-statistics/Shopify is Eating their Ecosystemhttps://twitter.com/theryanking/status/1497732269632598018Shopify Partners Programhttps://www.shopify.com/partnersShopify for DevelopersAPIs + Graphqlhttps://shopify.dev/api/admin-rest#tophttps://shopify.dev/api/admin-graphql#topApp Bridgehttps://shopify.dev/apps/tools/app-bridgePolaris Component Libraryhttps://polaris.shopify.com/?shpxid=796e493c-6D49-4898-EB5D-81EF16546D4AComponents included in HydrogenLiquidhttps://shopify.dev/api/liquidhttps://shopify.dev/themes/tools/dawnHydrogenhttps://shopify.dev/custom-storefronts/hydrogenWhat is HydrogenWhy Hydrogen?https://shopify.dev/custom-storefronts/hydrogen/getting-startedFeatures of the Hydrogen Frameworkhttps://shopify.dev/custom-storefronts/hydrogen/frameworkReactReact Server Componentshttps://shopify.dev/custom-storefronts/hydrogen/framework/react-server-componentsVitehttps://vitejs.dev/guide/why.html#why-not-bundle-with-esbuildSSRTailwindhttps://tailwindcss.com/Talk about Chakra UI here tooHydrogen UI ComponentsHosting with OxygenSupport the show