The React Show

Have you ever gotten burned out? Or do you want to learn how to prevent it from happening in the first place? In this two part series, Brian Wetzel, former CTO of Softgiving, discusses his own experiences with burnout and what we can do on a personal level as well as a engineering and process level to mitigate the chances of burnout.

Links

• Contact Brian: [email protected]
• Part 1
• Episode Page

Have you ever gotten burned out? Or do you want to learn how to prevent it from happening in the first place? In this two part series, Brian Wetzel, former CTO of Softgiving, discusses his own experiences with burnout and what we can do on a personal level as well as a engineering and process level to mitigate the chances of burnout.

Links

• Contact Brian: [email protected]
• Episode Page

In any application, not just Javascript based ones, user input is one of the foundational pieces for user interaction with the application, the server, and with others across the web. In order to capture user input, you need forms. In this episode, we’ll explore the box form support provided by React with the basic HTML form elements like input, textarea and select, as well as libraries that have been developed to enhance form creation, as well as to perform validation.

Resources

• https://reactjs.org/docs/forms.html
• https://reactjs.org/docs/uncontrolled-components.html
• https://react-hook-form.com/
• https://github.com/tannerlinsley/react-form
• https://formik.org/

Show Notes

• HTML + CSS as a basis for creating websites
• Javascript leads to enabling more user input and interactivity options
• Gathering user input without forms is possible, but forms make things simpler
• What are forms?
• Forms are the typical method we user input required to interact with an ecosystem
  • Highly opinionated
  • Many ways to do them
• Security, validation, accessibility etc.
• Lots to consider, what is the best way to do this in React?
  • Working with What We Have in React and Javascript/HTML
  • Controlled vs Uncontrolled
  • Validation
    • preventing server side hacking
    • ensuring validity of data
    • checking each field on submission
    • regex
• Where vanilla react forms fail?
  • large swathes of setStates or managing a large state object
  • multiple types of validation, shared validation
  • lots of vanilla code to cover existing and potentially future cases
  • you end up just creating your own form framework, so why not use an existing one?
• Form Frameworks
  • What are some options? Why do they exist?
    • React Hook Forms
    • Formik
      • Recommended by React Team
    • React Forms
      • Part of the Tan Stack (React Query Family)
  • React Hook Forms
    • ControlledForm
    • Controlled Components abstraction
    • Restricted to using Form State for Component state??
• Validation Frameworks
  • validator
  • Yup for Validation

Upcoming in a React release is React Server Components. No, they aren’t just Server-Side Rendering. In fact, they are quite different and quite powerful in their own way. In this episode we learn about React Server Components and discuss how they could be used in applications of the future.

Resources

• https://blog.plasmic.app/posts/how-react-server-components-work/
• https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
• https://vercel.com/blog/everything-about-react-server-components
• https://www.patterns.dev/posts/react-server-components/
• https://blog.bitsrc.io/react-server-components-1ca621ac2519

Show Notes

• Overview
  • Performance, Load Time, Etc Critical for success
  • 53% of users abandon a website if it takes more than 3 seconds to load
  • Users are not interested in using apps that have poor performance, don’t feel right
  • So many ways to tackle the problem, what method to pick?
    • Bundle Optimization with Webpack, etc.
    • Performance Audits in App
    • Server Side Rendering
• What are React Server Components?
  • Before RSC, all components were rendered in the browser...
  • With RSC, parts of the React Tree can be rendered by the browser, and other parts are rendered on the server.
• How is it different than Server Side Rendering?
• What are the main benefits of using React Server Components?
• How do React Server Components work?
  • component.server.jsx, component.client.jsx , component.jsx 
  • Client Components cannot import Server Components, only regular or Server components can.
  • Server Components can import Client components and Server components, and then within that, you can nest Server Components under Client Components.
  • Lifecycle of a React Server Component
    • Server receives request to render
    • Server serializes root component element to JSON
    • Browser reconstructs the React tree
• How can we get started implementing?
  • Vanilla React Implementation
    • react-server-dom-webpack
  • Nextjs Experimental
  • Shopify Hydrogen

In this episode we learn about the primary data structure underlying the React rendering process: React Fibers. With this knowledge we take a look at some of React’s design and how fibers impact development.

Resources

• https://github.com/acdlite/react-fiber-architecture
• https://blog.logrocket.com/deep-dive-into-react-fiber-internals/
• https://philippspiess.com/scheduling-in-react/
• https://programmingwithmosh.com/javascript/react-fiber/
• https://www.velotio.com/engineering-blog/react-fiber-algorithm

Show Notes

• What causes Jank? How do you get concurrency?
  • Jank is when we need to update the UI but we can’t because we’re still processing some other work
  • Breaking down “work” into small, discrete units of work
• How does React render?
  • Phase one: reconciler phase
  • Phase two: render to DOM/mobile/etc
• JavaScript execution model
  • JavaScript is single thread, no real concurrency
  • Event Queue
  • Stack frame
• React Renders
  • They can take a long time
  • Updates could potentially be batched
  • Some updates, like animations, keyboard events, should be prioritized
  • Processing an API response is less priority
• What are fibers?
  • A data-structure
  • Breaking down reconciler phase in discrete units of work run in a loop
  • Contain a priority level
  • Contain state needed to pause and resume execution
• Fibers are used to allow React to create its own scheduler
• How does this help?
  • React can control the execution model
  • Prioritizing and batching updates
  • Creating a “smooth” UX, less jank
• Things to watch for
  • If setting state based on a previous value always use the callback
  • Generally don’t need to watch for much, React has your back
• My opinion
  • It’s a clever, very inefficient, workaround for lack of proper concurrency in JS execution model
  • It means giving up control to React, good and bad...

Stop getting midnight calls because you broke the site on the last deploy: use Cypress for front-end testing! In this episode we talk about how we use the free, open-source testing framework Cypress to save time, catch bugs, and sleep better at night.

Links

• Cypress

Show Notes

• What is integration testing?
• What are other types of testing?
  • Unit
• Story Time, life without good tests
  • Stories about poorly written tests
• Problem: new features get priority over testing
• Good tests with good coverage speeds up development!
  • I always write tests before refactoring because you can go wild and know that all you have to do is get the tests to pass in the end
  • Good tests give confidence: you can write new features/code a lot more quickly because you don’t have to think about breaking things, if somethings breaks you’ll know and you can fix it
  • Infrastructure investment: it’s like investing in better roads and transportation networks, it has an upfront cost but you can move people and goods faster and more efficiently afterwards
• Solution: new features priority over testing
  • Estimates include testing
  • Don’t demo until you have tests if demoing puts on pressure to finish before you wrote tests
• What to test? / Testing priorities?
  • Integration first (ensures things actually work for the end-user)
  • Then unit
• What is Cypress used for?
  • Integration Tests
  • Unit Tests
• What makes Cypress best suitable for the task?
  • Fast
  • Consistent
  • Screenshots, videos, logs
  • Network request spies, spoofing
  • CI Integration
  • Dashboard
• What I don’t like about Cypress:
  • Async API
    • Maybe necessary for this because of JS?
• Successfully Maintaining Tests?
• When to write tests?
• Cypress tips & tricks
  • Custom commands
  • Capturing values
    • Example: capture a numeric value, do test, check that the new value is correct based on old one

Join Chris Keen, of Keen Concepts, in learning about being and becoming a React contractor and how to succeed long term.

Chris Keen has been a highly successful React consultant for over 7 years, a web contractor for nearly two decades, and is the founder of Keen Concepts. In this episode, we’ll learn from Chris how to become and stay a successful React contractor.

Links

• Keen Concepts
• Chris Keen LinkedIn
• Chris Keen Stackoverflow
• Chris Keen Github

A great way to improve the UX of most React applications is to include a query caching layer. In this episode we talk about why it can be be so important and some techniques to implement it well.

• React Query
• SWR (For Next.js)

Show Notes

• Issues
  • Example, data hooks based on another data hook; “location” hook used everywhere
  • Issues with vanilla data fetching hooks
    • Every component/page refetches everything
    • Everything re-renders
    • Delays while waiting for parent hooks to return data
  • Not triggering requests at the correct/ideal time
    • Should be when the user clicks the button to open the new page, not when the new page component is loaded
  • How to structure dependent data flows and refetches?
  • Could also use global state
  • Update endpoints that return new data/object
  • Scroll recovery
  • Paged endpoints
  • refresh intervals
• ️️️Resolution
  • Query caching/fetching logic lib
    • SWR, React Query etc
    • Tell lib what endpoint to hit and under which conditions, assigning that setup a key
      • Lib stores result with a key
      • Everything is done via that key, if the cache has a value for it it will return it
      • Returns the same value every time the hook is used so it doesn’t cause a re-render, smoother app
    • Stale-while Revalidate
      • Loading state
  • key/value store with fetching logic built in
  • downsides
    • some places where it isn’t needed, appropriate
    • Complicated
  • RQ has good dev tools, use them!
  • Triggering requests at the correct/ideal time
  • Generally use endpoint paths as keys
  • scroll recovery
  • paged endpoints
  • dependencies
  • refresh intervals
  • hook for creating RQ endpoints

As React Developers, we’ve definitely got the front-end under control, but what about the back-end? One of the core components of a successful application is your Database. What is a Database? How do you choose the right one? Where do you host it? We’ll answer all your questions and share some experiences on Where and How to Store Data from your React Application

Show Notes

• Intro
  • New Year’s Chat
• Data is fundamental to solving every programming problem
  • First thing I do, whether it is writing an app or designing an algorithm or creating a library is look at the data
  • What is the structure and how I will interact with it
• From Hard Coded Values to Your First Database
  • Paralysis by Analysis due to lack of knowing options
  • Starting with something that you don’t know well and it takes up all your time
  • Making the wrong choice and sticking with it even though it causes more problems
  • Making wrong assumptions on how you write your front-end, and it doesn’t sync up well with the way you are receiving data
• Making the Right Choice
  • What is the structure of the data?
  • Who is the data for?
  • How is the data accessed?
  • How to choose the right type of data storage?
    • Types of Data Storage
      • Relational Databases
        • Great for CRUD
        • Typically the best to start with
        • Simple data models
        • Need to know SQL
        • Good enough to use for most things
      • Key Value Stores
        • Fast access + updates to self contained datasets?
        • Document Stores
        • Good for specialized cases
      • Graph Database
        • What is a graph?
          • Network of Vertices and Edges
          • Common Algos
            • Shortest path between two verticies
        • Allows relations via whole networks
        • Find the path between two nodes
  • Maintenance resources?
    • Choosing libraries
      • SQL Lite
        • File Based Relational Storage
        • option for when Code changes every few years
      • Running your own Database Server
        • Check if it’s running
        • User Accounts
        • App logins, connection maintenance
        • option for when Code changes frequently?
    • How often does the code-base change?
  • Where to Host Your Database
    • Self Hosted
      • Privacy
      • More “maintenance” but not really if you do it right.
    • Databases As a Service
      • No Guaranteed Privacy
      • Extra costs associated
      • Heroku
      • Sanity
  • Wrap Up
    • Starting with Something you know
      • Migrate when you need
    • What to look for when researching new option

A lot of us end up wasting a lot of time doing repetitive tasks. But we also worry that learning a new scripting language or keyboard shortcuts will be more work than it’s worth. In this episode we discuss a method you can use to find the right things to optimize.