Intermediate React, v5

Brian Holt

Brian Holt

SQLite Cloud
6 hours, 6 minutes CC
Intermediate React, v5

Course Description

Learn to build scalable React 18.x+ applications using the latest tools and techniques available in the React ecosystem! This course is modular, where you can pick and choose various react ecosystems you want to learn. You’ll learn hooks in-depth, TailwindCSS, increase performance with code splitting and server-side rendering using Suspense, add TypeScript, state management with Redux Tookit, and test your app with Vitest.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: December 6, 2022

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 9 minutes

Hooks in Depth

Section Duration: 37 minutes
  • useRef
    Brian introduces the useRef hook which can store references to DOM elements. This way the component can guarantee the same element is referenced during any re-render cycles. Combining useRef with the memo method will eliminate re-rendering and increase performance for expensive components.
  • useReducer
    Brian demonstrates how useReducer can create Redux-style reducers inside a hook. This approach creates very testable reducers since the function receives state and action parameters and returns a new state.
  • useMemo
    Brian explains how useMemo can add performance optimizations to a component by eliminating re-rendering in the DOM. This can help keep animations smooth and reduce studdering or janky behavior.
  • useCallback
    Brian demonstrates that similar to useMemo, the useCallback hook memoizes a callback function. This allows a resource-intensive function to be isolated so it will not run on every render.
  • useLayoutEffect & useID
    Brian explains that useLayoutEffect is called immediately after the render function so any calls to setState inside that effect will result in only one re-render instead of two.
  • Additional Hooks
    Brian walks through a some additional hooks that are not frequently used, but helpful in specific situations. These hooks include useImperativeHandle, useDebugValue, useSyncExternalStore, and useInsertionEffect.

Tailwind CSS

Section Duration: 49 minutes

Advanced React Performance

Section Duration: 46 minutes
  • Code Splitting
    Brian introduces code splitting which allows individual components to be lazy-loaded when they are required instead of with the initial application bundle. This technique can help meet performance budgets and improves user experience on slower connections.
  • Server Side Rendering
    Brian explains how server-side rendering runs React code on a Node.js server before the response is sent to the user. This allows the initial portion of the application to be rendered and sent back to the user while the server creates a readable stream of the remaining content.
  • Node Streams with Express
    Brian creates an Express server in Node.js to server-side render the React application. The HTML document is split into two parts. The first part is sent back to the user immediately while the remaing part is returned once the React application is hydrated.
  • Server-Side Fetching
    Brian demonstrates server-side fetching, which is an experimental feature available in Node version 18. Without any code modifications, Brian configures the project to run the fetch request on the server so the results are rendered server-side and sent to the user with the rest of the server-rendered markup.

Low Priority Re-Rendering

Section Duration: 14 minutes
  • useDeferredValue
    Brian demonstrates the useDeferredValue hook and explains how it can reduce re-rendering by caching data, like the results of a fetch request. If the current render is the result of an urgent update, React will return the previous value and then render the new value after the urgent render has completed.
  • useTransition
    Brian uses the useTransition hook to defer showing a loading state in the UI until all other high-priority rendering is completed.

TypeScript

Section Duration: 1 hour, 15 minutes

Redux

Section Duration: 57 minutes

Testing

Section Duration: 1 hour, 10 minutes
  • Setup React Testing Library & Vitest
    Brian installs the Vitest test runner and happy-dom which is an alternative to js-dom. A library like happy-dom is required to simulate the browser environment. This is faster than spinning up a browser with a tool like Puppeteer.
  • Testing a Component
    Brian creates a __tests__ directory to hold all test files. Tests are written for the Pet component to ensure the component displays a default thumbnail when no image is provided and a non-default thumbnail when there is an image provided.
  • Testing User Interaction
    Brian writes a test to ensure the proper image is displayed and the active class is applied when a user clicks on a thumbnail. The Carousel component is rendered and supplied an array of images. The click() method is called to simulate a user click event.
  • Testing Custom Hooks
    Brian tests the useBreedList custom hook. First, the hook is tested with an older sytax which involved providing a temporary React component to run the hook. The code is then refactored to use the renderHook() method which simplifies the test.
  • Testing Mocks
    Brian uses the mockReponseOnce() method to test an API request. A mocked breedlist is passed to the request. When the result is received, the test validates the request was successful and checks the breeds returned are equal to the mocked data.
  • Snapshots
    Brian demonstrates snapshot tests and explains why they are low confidence, low cost ways of writing tests. A copy of the rendered markup is saved in a __snapshops__ directory. When the test is run again, the current markup is compared to the saved copy. If something has changed, the test fails.
  • Testing Coverage
    Brian demonstrates how to generate a test coverage report. The report summarizes the percentage of statements, functions, and lines of code covered by a test. A web interface is also generated inside the src/coverage directory which allows developers to click on source files and view which lines are not covered.
  • Vitest VSCode Extension
    Brian demonstartes the Vitest VSCode extension. It adds a panel which displays each test and allows developers to individually view or run a test.

Wrapping Up

Section Duration: 4 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now