Neon
Intermediate React, v6
6 hours, 22 minutes
CC
Course Description
Master React 19 and build high-performance apps! Understand how React Server Components work under the hood and use them with and without Next.js. Build apps using render modes like static site generation and server-side rendering. Explore performance bottlenecks in the framework and leverage transitions and deferred values as you maximize performance. Level-up your React skills and have the confidence to lead your next project.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: April 27, 2025
Learning Paths
Topics
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
Table of Contents
Introduction
Section Duration: 17 minutes
Brian introduces the course by explaining that this course focuses on more advanced and newer features of React, such as React server components and performance optimization. Brian also provides information about the course structure, prerequisites, and his background.
Brian walks through his development setup for this course, including Node.js (v22.14), fnm for version management, and tools like VS Code, Firefox, and macOS's terminal. He shares his theme, font choices, and thoughts on AI-assisted coding, stressing the importance of mastering fundamentals before relying on AI. He also mentions that React 19 has recently been released and discusses the stability and features of the new version.
React Render Modes
Section Duration: 1 hour, 4 minutes
Brian introduces the concept of different render modes in React and explains that client-side React is the traditional approach where the entire JavaScript bundle is shipped to the web page and rendered on the client-side. He emphasizes that the server-side techniques he will discuss, such as server-side rendering (SSR) and static site generation (SSG), are optional and should be adopted based on specific needs and measured performance improvements.
Brian demonstrates building a static site generator with React from scratch. He renders a React component to static HTML using `renderToStaticMarkup` and injects it into an index.html file. While this approach is useful for basic static sites, he recommends frameworks like Astro or Next.js for more complex projects.
Brian explains that server-side rendering (SSR) can improve perceived performance by showing users something before the app becomes interactive. He also mentions that SSR adds complexity and requires consideration of browser APIs that may not be available on the server.
Brian demonstrates how to set up the index.html file and the app.js file for a server-side rendering (SSR) project. He also mentions that SSR and client-side hydration are sensitive to white space and advises against including unnecessary white space in the markup.
Brian walks through how to create a client.js and server.js file to handle SSR in React. He also discusses the difference between `renderToString` and `renderToStaticMarkup`.
Brian answers questions regarding whitespace errors when using an auto-formatter and injecting a different starting number for the counter. He also mentions that renderToPipeableStream can also be used to output chunks of markup as it renders.
React Server Components
Section Duration: 1 hour, 30 minutes
Brian introduces React Server Components (RSCs), which render exclusively on the server and maintain a connection with the app, unlike SSR, which only speeds up the initial load. RSCs allow for server-side code execution, such as making SQL queries, without sending the code to the client.
Brian guides walks through through setting up an RSC project with Webpack, covering essential packages and configurations. He demonstrates how to configure Webpack, set up Babel, and structure the index.html file.
Brian begins by setting up the project structure, creating a src directory, an App.jsx file, and builds the client component. The client component uses useState to manage a counter and includes a button that increments the counter when clicked.
Brian introduces server components, demonstrating how they use async functions to fetch data from a SQLite database and render it in a table format. He explains that server components always execute first and handle data retrieval before passing the results to client components. Brian also implements the createRoot and createFromFetch functions, illustrating how to render components efficiently on the client side.
Brian explains how to set up a server directory for a React server-side rendering application. He demonstrates how to patch the node module system to handle JSX and React server components using the `react-server-dom-webpack` packages.
Brian explains the process of creating the flight protocol and handling errors using try-catch. He also shows how to define the content type as "application/octet-stream" and uses template strings to return the response.
RSCs with Next.js
Section Duration: 1 hour, 23 minutes
Brian introduces Next.js and explains that Next.js allows for server-side rendering and enables developers to write React code. He also explains that Next.js can be used as a monolith or as a middle-end server, depending on the project's requirements.
Brian demonstrates how to create a new Next.js app using JavaScript instead of TypeScript. He explains the app router in Next.js and shows how to create routes using the Link component. He also discusses the layout component and how it is used in conjunction with the page component.
Brian demonstrates how to fetch data from a SQLite database and return it to the client. He also mentions that server components in Next.js are similar to regular components but offer a more streamlined approach to handling server-side rendering.
Brian demonstrates how to use a form action attribute to send data from the client to the server, without the need for additional wiring or state management. He walks through an example of creating a form with select options, a text area, and a submit button.
Brian explains how to create a "postNote" server-side function that takes in form data, validates it, and saves it to a database using parameterized queries to prevent SQL injection. He also discusses the use of the "useServer" function to explicitly indicate that the function runs on the server.
Brian explains that server components cannot be children of client components, but there is a workaround for loading server data into a client component. He demonstrates this by creating a teacher view server component that fetches initial notes from the server and passes them as props to a client page client component. He also shows how to implement polling in the client component to continuously fetch new notes from the server.
Brian discusses the limitations of server components, including that server components cannot be children of client components. However, he provides a workaround where you can pre-render the server component as a child of the client component and then render it on the client side.
Brian concludes the discussion on server-side rendering with React, stating that Next.js is useful when there are frequent client actions calling an API, but may not be necessary for extremely client-side heavy applications. Brian emphasizes the flexibility and power of React, stating that it can be used as its own framework or to construct larger frameworks, making it a versatile tool.
Performance Optimizations
Section Duration: 36 minutes
Brian introduces the concept of optimizing React components by preventing unnecessary re-renders using techniques such as memoization. He cautions against overusing these techniques and highlights that the default behavior of React is usually sufficient for most applications.
Brian demonstrates a performance issue with a React app that re-renders a Markdown preview component every time the user types in a text area. He shows how the UI becomes janky and slow when the rendering becomes expensive. Brian also discusses the use of the `dangerouslySetInnerHTML` API and the potential security risks associated with it.
Brian explains how to optimize React components using the `memo` and `useCallback` hooks. He demonstrates how to use `memo` to prevent unnecessary re-renders by caching the component when its props don't change. He also shows how to use `useCallback` to memoize functions and prevent them from being recreated on each render.
Brian explains the differences between useMemo and useCallback in React. He advises using these tools sparingly and being cautious of potential bugs that can arise from overusing them. Brian also mentions the React compiler, React profiler, and other built-in tools to identify and solve performance issues in React.
Transitions
Section Duration: 29 minutes
Brian introduces the concept of transitions in React and explains that they are used to make the user interface feel more responsive while performing larger tasks in the background. He also introduces a scoreboard app that will be used to demonstrate transitions and explains the structure of the project.
Brian walks through building a React app without transitions to display scores. He also demonstrates how long loading times negatively impact user experience when transitions are not used.
Brian introduces the useTransition hook in React and demonstrates how to use it to handle asynchronous operations and transitions. He explains that useTransition allows you to defer lower priority renders while a transition is in progress, preventing race conditions.
Optimistic Values
Section Duration: 23 minutes
Brian introduces the concept of optimistic UI updates, which involve showing the user that an action has been taken before it is actually completed. He also mentions that while these updates can be achieved without specialized hooks, leveraging React's scheduler and reconciler through hooks simplifies the process.
Brian builds a UI that shows deep thoughts using the useState hook to manage the thoughts and thought input, and creates an async function to post deep thoughts to the server.
Brian demonstrates how to use the `useOptimistic` hook to handle optimistic updates in an array of thoughts. He also shows how to use the `startTransition` function to mark a low-priority re-render and ensure that the optimistic updates work correctly.
Deferred Values
Section Duration: 34 minutes
Brian introduces the concept of deferred values in React and explains how they can be used to prevent jank (jerky animations or slow rendering) when dealing with computationally expensive tasks that require frequent re-rendering. He demonstrates the use of the `useDeferredValue` hook, which allows developers to specify that a value should only be re-rendered once it has settled, rather than on every intermediary change.
Brian demonstrates how to create an image editor using React. He integrates various editing components into the app component and uses React hooks to manage the state of the image properties. The resulting image editor allows users to dynamically adjust the image filters using sliders.
Brian explains how to use the `useDeferredValue` hook in React to optimize rendering and reduce jank in the UI. By marking certain renderings as low priority, React can prioritize high priority renderings and update the low priority ones when it has available resources.
Brian answers student questions regarding how to handle client-heavy applications, self-hosting Next.js, writing tests for useDeferredValue and useTransition, and suggestions for building a career in React. Questions regarding how to approach full-text search on statically generated sites and managing server-side and client-side components in large-scale projects are also discussed.
Wrapping Up
Section Duration: 2 minutes
Brian wraps up the course by encouraging students to keep building and refining their React skills. He also shares recommendations for further learning and practice.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops