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 Guide

The challenge: forms suck in React today, can we design a better way to work with forms in React?

Links

• Source Code From Episode
  
  
  

What 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.

Resources

• React 18 Release Post
• React 18 Upgrade Guide

Show Notes

• Major New Features 
  • Concurrency! 
  • Mostly an implementation detail but powers many of the features.
  • Interruptible renders! Better/smoother UI UX
  • React 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 change
  • Only enabled in parts of your app that use new features
  • Benefits will take some time to realize, like waiting on library authors
  • Suspense in Data Frameworks
  • Server Components, still in development
  • Automatic Batching
  • Prioritized updates / AKA "transitions"
  • Suspense On The Server
  • Strict Mode developer features
  • useTransition mark state updates as non-urgent
  • useDeferredValue an upgrade over debouncing, an interruptible render that doesn't block user input
  • useSyncExternalStore for libs, removes the needs to use useEffect when implementing subscriptions
  • useInsertionEffect for libs, helps with CSS-in-JS lib performance issues
• How to upgrade: 
  • install React 18 via npm
  • change ReactDOM.render to ReactDOM/client.createRoot (unmountComponentAtNode is also updated)
  • callback is removed from render use useEffect or similar instead depending on use case
  • If using SSR with hydration change hydrate to hydrateRoot
• State of React 18 & Reported issues:
• Should you upgrade? Or when should you upgrade?

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.

Resources

• Evolutionary Prototyping

Is React the final answer? Is it possible today to take React’s shortcomings to create something better than React?

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.

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.

Show Notes

• Keeping Ahead of the Hiring Curve
• Practice makes Perfect
• Story Time on “Practice” React Applications we Made
• Transition: Making the Practical even more Practical
• Capitalizing on the eCommerce Industry
  • https://acquireconvert.com/shopify-statistics/
• Shopify is Eating their Ecosystem
  • https://twitter.com/theryanking/status/1497732269632598018
• Shopify Partners Program
  • https://www.shopify.com/partners
• Shopify for Developers
  • APIs + Graphql
    • https://shopify.dev/api/admin-rest#top
    • https://shopify.dev/api/admin-graphql#top
  • App Bridge
    • https://shopify.dev/apps/tools/app-bridge
  • Polaris Component Library
    • https://polaris.shopify.com/?shpxid=796e493c-6D49-4898-EB5D-81EF16546D4A
    • Components included in Hydrogen
  • Liquid
    • https://shopify.dev/api/liquid
    • https://shopify.dev/themes/tools/dawn
  • Hydrogen
    • https://shopify.dev/custom-storefronts/hydrogen
• What is Hydrogen
  • Why Hydrogen?
    • https://shopify.dev/custom-storefronts/hydrogen/getting-started
  • Features of the Hydrogen Framework
    • https://shopify.dev/custom-storefronts/hydrogen/framework
    • React
      • React Server Components
        • https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components
    • Vite
      • https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild
      • SSR
    • Tailwind
      • https://tailwindcss.com/
      • Talk about Chakra UI here too
  • Hydrogen UI Components
• Hosting with Oxygen