Table of Contents
IntroductionKent 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 SetupKent 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.
Non-Nav Mutations ExerciseStudents 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 SolutionKent demonstrates the solution to the Non-Nav Mutation exercise.
Optimistic UI ExerciseStudents are instructed to apply Optimistic UI techniques to the application by listing new deposits immediately after the user submits them.
Optimistic UI SolutionKent demonstrates the solution to the Optimistic UI exercise.
Optimistic UI Q&AKent 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 ExerciseStudents 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 SolutionKent codes the solution to the Focus Management exercise.
Revalidation Optimization ExerciseStudents 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 SolutionKent demonstrates the solution to the Revalidation Optimization exercise.
Non-Nav Fetching ExerciseStudents 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 SolutionKent walks through the solution to the Non-Nav Fetching exercise.
Imperative Mutations ExerciseStudents 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 SolutionKent demonstrates the solution to the Imperative Mutations exercise.
Improving Loading UX
Pending UI Loading Spinner ExerciseStudents 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 SolutionKent walks through the solution to the Pending UI Loading Spinner exercise.
Skeletons ExerciseStudents 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 SolutionKent codes the solution to the Skeletons exercise.
Defer ExerciseStudents are instructed to implement the defer, Suspense, and Await APIs on the $customerId route to create the best loading experience.
Defer SolutionKent walks through the solution to the Defer exercise.
Defer & React StreamingKent 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 ErrorKent briefly debugs a boundary error thrown by the Suspense component.