Table of Contents
Introduction
Introduction
Kent C. Dodds introduces the course and discusses the benefits of the advanced Remix topics. This course builds on the concepts learned in the Remix Fundamentals course.
Repo Setup
Kent walks through the course repository and explains how to run the different applications. A README file with instructions and places for note-taking accompanies each exercise. A question about testing is also addressed in this segment.
UI Functionality
Non-Nav Mutations Exercise
Students are instructed to use the useFetcher().Form component to avoid a full-page refresh and history stack addition when the form is submitted.
Non-Nav Mutations Solution
Kent demonstrates the solution to the Non-Nav Mutation exercise.
Optimistic UI Exercise
Students are instructed to apply Optimistic UI techniques to the application by listing new deposits immediately after the user submits them.
Optimistic UI Solution
Kent demonstrates the solution to the Optimistic UI exercise.
Optimistic UI Q&A
Kent uses a TodoMVC application to answer questions about handling multiple UI updates to the same component. Questions about managing fetchers are also answered in this segment.
Focus Management Exercise
Students are instructed to add logic to focus the element with a validation error. If there are no errors, the first input element should be focused.
Focus Management Solution
Kent codes the solution to the Focus Management exercise.
Revalidation Optimization Exercise
Students are instructed to use the unstable_shouldReload API to indicate which routes should be reloaded when a specific mutation or client-side transition occurs.
Revalidation Optimization Solution
Kent demonstrates the solution to the Revalidation Optimization exercise.
Non-Nav Fetching Exercise
Students are instructed to connect the combo box component to the database, so as the user begins typing, the combo box shows matching results.
Non-Nav Fetching Solution
Kent walks through the solution to the Non-Nav Fetching exercise.
Imperative Mutations Exercise
Students are instructed to finish the Remix implementation of the logout modal. A post request should be sent to the /logout route with the useSubmit() hook.
Imperative Mutations Solution
Kent demonstrates the solution to the Imperative Mutations exercise.
Improving Loading UX
Pending UI Loading Spinner Exercise
Students are instructed to render the spinner component with the useTransition hook when the application is in a loading state. The spin-delay package can also be used to delay the showing and hiding of the spinner.
Pending UI Loading Spinner Solution
Kent walks through the solution to the Pending UI Loading Spinner exercise.
Skeletons Exercise
Students are instructed to show a skeleton UI to improve the user experience while the content is loading. The useTransition().location.state object can help determine which customer record is being transitioned.
Skeletons Solution
Kent codes the solution to the Skeletons exercise.
Defer Exercise
Students are instructed to implement the defer, Suspense, and Await APIs on the $customerId route to create the best loading experience.
Defer Solution
Kent walks through the solution to the Defer exercise.
Defer & React Streaming
Kent uses the network profiler in the browser developer tools to explain how the Remix Defer component works in tandem with React Streaming. A question about nesting suspense objects is also discussed in this segment.
Suspense Boundary Error
Kent briefly debugs a boundary error thrown by the Suspense component.
