ReactJS

How to make Videos with React using Remotion

Oct 15, 2021

7 min read

How to make Videos with React using Remotion

We've written a blog post discussing how React truly is a "Learn Once, Write Anywhere" library. In that article, we talked about how we aren't limited to rendering React components to the DOM.

In this post, we'll discuss how we can leverage our knowledge of developing React components and create Videos, using Remotion. If you already know [React] and follow along with this post, you'll walk away with a custom .mp4 video of you're own creation, and the knowledge of how to customize it to you're heart's content.

Remotion

Remotion is a suite of libraries for creating videos programmatically with React.

Just like react-dom is used to provide an interface between React components, and rendering to the DOM, Remotion is used to provide an interface between React and rendering to Video.

If you know React, you can make videos. -- Remotion Documentation

This is exciting because it allows developers to re-use their knowledge of the React library for yet another purpose. Let's dive in and see how we can start rendering some videos!

Initializing a Remotion Video Project

Creating a new Remotion video is as easy as a 1 line command:

npm init video

Running this command gives the user access to a few default templates for Remotion video development:

Hello World
Blank
Hello World (Vanilla Javascript)
React Three Fiber
Still Images
Text to Speech

The Hello World templates are fantastic places to go if you are a hands-on learner and like playing around with your code in a live dev environment. They're how I learned to use Remotion. They're packed with such great logic, that I'd encourage you to run a template before moving on and exploring them a bit to see how things are laid out.

That being said, I want to go over things rather slowly, so I'm going to create a repo from the Blank template, add a few development features (linting, husky, prettier, etc), and use that as a starting point. If you want to develop with these features and want a similar starting point, clone the repo here and you can see every commit from beginning to end. This is the exact commit after I finished installing linting to the Blank template.

The Blank Remotion Template

If you cloned the repo I mentioned above, you'll be working in the Blank template, with a few additional dev features.

The main 2 files are:

src\index.tsx: This is similar to the index file of a regular create-react-app. It uses a render function to take a React component, and render it to the desired output, in this case, a .mp4 video. We won't be looking in here.
src\Video.tsx: This is the main entry point of our video. Think of this as the App component in a create-react-app project. It's here that we layer together React components to create our Remotion video. This is where we will start to focus our attention.

The Composition component

The entry point file Video.tsx introduces us to our first Remotion component, Composition.

<Composition
  id="Empty"
  component={EmptyComponent}
  durationInFrames={60}
  fps={30}
  width={1920}
  height={1080}
/>

We can see this component in action by running npm start and checkouting out our development environment:

The Remotion development environment has 4 important sections:

Compositions: The left main column. This is a list of all defined Composition components in Video.tsx. The Blank template defines a single Composition, with an id == 'Empty'
Scenes: The bottom left column. We haven't talked about scenes yet...
Composition Render: The main dev zone. This is the development render of the currently selected Composition.
Composition Timeline: This is a timeline of scenes rendered in the currently selected Composition.

The Composition component has a few important properties:

id: This is the name given to the Composition, used to identify the component in the development environment.
component: This is the component that the Composition renders. Different compositions can render the same component, for responsiveness for example.
durationInFrames & fps: A Composition is not defined by how long it is in time, but by how many frames it is made up of, and how fast those frames are rendered.
width & height: Together, these define the aspect ratio of our video. You could define an HD Composition with a 1920/1080 width/height, or a square still from a single frame of a Component with a 200/200 width/height for example.
defaultProps: This is the props object passed into the component when the Composition is rendered.

This repository defines a super small empty component as the component-to-render for the Empty composition. Let's rename our component to HelloWorld, and create a full-fledged component to render. We'll render a simple, 4-second video, of the text "Hello, World!", in high definition, at 60fps.

src/Video.tsx

import { HelloWorld } from './components/HelloWorld';

<Composition
  id="HelloWorld"
  component={HelloWorld}
  durationInFrames={240}
  fps={60}
  width={1920}
  height={1080}
  defaultProps={{
    text: 'Hello, World!',
  }}
/>

src/components/HelloWorld.tsx

import { FC } from 'react';

type HelloWorldProps = {
 text: string;
};
export const HelloWorld: FC<HelloWorldProps> = ({ text }) => (
 <div
  style={{
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   flex: 1,
   backgroundColor: 'black',
   color: 'cyan',
   fontSize: 200,
   fontFamily: 'Arial, Helvetica, sans-serif',
  }}
 >
  <div>{text}</div>
 </div>
);

To render this to .mp4 you need to have ffmpeg installed. Adjust the package.json build command and instruct the CLI to render our HelloWorld composition, and run npm run build to create our first video!

Here's a link to what this would render. It's nothing crazy, but with previous React knowledge, and with the help of Remotion, we have created a 4 second long, 60fps, 4K video!

Simple animations with `interpolate`

Rendering some static text to video doesn't make for an exciting video, so let's learn how to reach into the state of the application, and adjust the style of our text, depending on the current frame. Here are the 2 hooks we'll use to accomplish this:

useCurrentFrame: This hook returns the current frame number.
interpolate: This hook helps the user change values throughout several frames. It takes in 3 arguments, the current frame (from useCurrentFrame), a tuple designating the start and end frame for the interpolation, and another tuple defining the start and end values for the frame duration.

Using these 2 hooks, we can define what the opacity of our text should be, as a function of the current frame:

import { FC } from 'react';
import { interpolate, useCurrentFrame } from 'remotion';

type HelloWorldProps = {
 text: string;
};
export const HelloWorld: FC<HelloWorldProps> = ({ text }) => {
 const frame = useCurrentFrame();

 const fadeInTime = 90;
 const startFrame = 30;
 const opacity = interpolate(
  frame,
  [startFrame, startFrame + fadeInTime],
  [0, 1]
 );

 return (
  <div
   style={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: 'black',
    color: 'cyan',
    fontSize: 200,
    fontFamily: 'Arial, Helvetica, sans-serif',
   }}
  >
   <div style={{ opacity }}>{text}</div>
  </div>
 );
};

Here's a link to what this would render. We aren't rendering static text anymore. Now we have a real video!

The Sequence component

Videos can be made up of MANY moving parts though. Our current video only has 1 moving part, but let's add some complexity to the video and split this into 2 parts. To do this, we need to take advantage of the Sequence component.

Using a Sequence, you can time-shift certain parts of your animation and therefore make them more reusable. Sequences are also shown in the timeline and help you visually understand the structure of your video. -- Remotion Docs

We can use sequences to help us break apart our logic even further, and we can also view these sequences on our composition timeline. Here are some important props for the Sequence component:

from (required, number): The frame that the Sequence children start at. The initial frame for them is 0.
durationInFrames (optional, default: Infinity): This is how many frames a sequence is displayed.
name (optional): Name your sequences to label them in the development environment.
layout (optional, default: 'absolute-fill'): Sequences are positioned absolutely initially, use this to handle layout manually.

Let's animate our "Hello, World!" a bit more:

src/components/HelloWorld.tsx

import { FC } from 'react';
import { interpolate, useCurrentFrame, Sequence } from 'remotion';

type HelloWorldProps = {
 firstText: string;
 secondText: string;
};
export const HelloWorld: FC<HelloWorldProps> = ({ firstText, secondText }) => {
 const frame = useCurrentFrame();

 const fadeInTime = 90;

 const firstTextStartFrame = 30;
 const firstTextOpacity = interpolate(
  frame,
  [firstTextStartFrame, firstTextStartFrame + fadeInTime],
  [0, 1]
 );

 const secondTextStartFrame = 150;
 const secondTextOpacity = interpolate(
  frame,
  [secondTextStartFrame, secondTextStartFrame + fadeInTime],
  [0, 1]
 );

 return (
  <div
   style={{
    flex: 1,
    backgroundColor: 'black',
    color: 'cyan',
    fontSize: 200,
    fontFamily: 'Arial, Helvetica, sans-serif',
   }}
  >
   <Sequence name="FirstText" from={0}>
    <div
     style={{
      position: 'absolute',
      opacity: firstTextOpacity,
      top: 250,
      left: '50%',
      transform: 'translateX(-50%)',
     }}
    >
     {firstText}
    </div>
   </Sequence>
   <Sequence name="SecondText" from={150}>
    <div
     style={{
      position: 'absolute',
      opacity: secondTextOpacity,
      margin: '0 auto',
      top: 550,
      left: '50%',
      transform: 'translateX(-50%)',
     }}
    >
     {secondText}
    </div>
   </Sequence>
  </div>
 );
};

With a few sequences, we are now separating our animations, and labeling them in our dev environment. Here is the render uploaded to YouTube.

Putting the 'World' in 'Hello, World!'

Being able to render text is amazing, but in the animation world, models aren't drawn manually with code. Instead, they're generated using software, such as Blender for example. One of the tools we can render with using Remotion is React Three Fiber. Just like Remotion lets us render to a Video format, React Three Fiber allows us to render React components into ThreeJS, a WebGL library.

With a bit of React Three Fiber logic and a publicly available model of our planet, we can put the 'World' in 'Hello, World!'

Hello, World!

Going into how to work with React Three Fiber is a bit out of the scope of this post, but I wanted to show just what the developer is capable of with Remotion, and rendering a spinning planet with JSX is pretty amazing.

src/components/HelloWorld.tsx

   <Sequence name="Earth" from={mainTextFadeOutFrame + mainTextFadeOutTime}>
    <div style={{ opacity: earthOpacity }}>
     <ThreeCanvas width={1920} height={1080}>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Suspense fallback={null}>
       <Earth scale={0.005} />
      </Suspense>
     </ThreeCanvas>
    </div>
   </Sequence>

Conclusion

React truly is a "Learn Once, Write Anywhere" language. The DOM is nowhere close to the only render target React is capable of. With Remotion, we've learned how to slap together some JSX and hooks, and render actual videos, programmatically. Feel free to clone the repo and play around with the logic.

If you've followed along with this post, you can now proudly state that you can literally render "Hello, World!" with React!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Matthew Pagan

@mastapegs @mastapegs

Demystifying React Server Components

React Server Components (RSCs) are the latest addition to the React ecosystem, and they've caused a bit of a disruption to how we think about React. Dan Abramov recently wrote an article titled "The Two Reacts" that explores the paradigms of client component and server component mental models and leaves us with the thought on how we can cohesively combine these concepts in a meaningful way. It took me a while to finally give RSCs the proper exploration to truly understand the "new" model and grasp where React is heading. First off, the new model isn't really new so much as it introduces a few new concepts for us to consider when architecting our applications. Once I understood the pattern, I found an appreciation for the model and what it's trying to help us accomplish. In this post, I hope I can show you the progression of the React architecture in applications as I've experienced them and how I think RSCs help us improve this model and our apps. A "Brief" History of React Rendering and Data-Fetching Patterns One of the biggest challenges in React since its early days is "how do we server render pages?" Server-side rendering (SSR) is one of the techniques we can use to ensure users see data on initial load and helps with our site's SEO. Without SSR, users would see blank screens or loading spinners, and then a bunch of content would appear shortly after. An excellent graphic on Remix's website demonstrates this behavior from the end user's perspective and it's a problem we generally try to avoid as developers. This problem is so vast and difficult that we've been trying to solve it since 2015. Rick Hanlon from the React Core Team reminded us just how complicated this problem was recently. If you think react is complicated now, go back to 2015 when you had to configure babel and webpack yourself, you had to do SSR and routing yourself, you had to decide between flow and typescript, you had to learn flux and immutable.js, and you had to choose 1 of 100 boilerplates— Ricky (@rickhanlonii) January 28, 2024 But SSR has its issues too. Sometimes SSR is slow because we need to do a lot of data fetching for our page. Because of these large payloads, we'll defer their rendering using lazy loading patterns. All of a sudden we have spinners again! How we've managed these components has changed too. Over the years, we've seen a variety of patterns emerge for managing these problems. We had server-side pre-fetching where we had to hydrate our frontends application state. Then we tried controller-view patterned components for our lazily loaded client-side components. With the evolution of React, we were able to simplify the controller-view patterns to leverage hooks. Now, we're in a new era of multi-server entry points on a page with RSCs. The Benefits of React Server Components RSCs give us this new paradigm that allows us to have multiple entries into our server on a single page. Leveraging features like Next.js' streaming mode and caching, we can limit what our pages block on for SSR and optimize their performance. To illustrate this, let's look at this small block of PHP for something we might have done in the 2000s: index.php ` For simplicity, the blocks indicate server boundaries where we can execute PHP functionality. Once we exit that block, we can no longer leverage or communicate with the server. In this example, we're displaying a welcome message to a user and a list of posts. If we look at Next.js' page router leveraging getServerSideProps, we would maybe write this same page as follows: pages/posts.jsx ` In this case, we're having our server do a lot to fetch the data we need to render this page and all its components. This also makes the line between server and client much clearer as getServerSideProps runs before our client renders, and we're unable to go back to that function without an API route and client-side fetch. Now, let's look at Next.js' app router with server components. This same component could be rendered as follows: app/posts/page.tsx ` This moves us a bit closer back to our PHP version as we don't have to split our server and client functionality as explicitly. This example is relatively simple and only renders a few components that could be easily rendered as static content. This page also probably requires all the content to be rendered upfront. But, from this, we can see that we're able to simplify how server data fetching is done. If nothing else, we could use this pattern to make our SSR patterns better and client render the rest of our apps, but then we'd lose out on some of the additional benefits that we can get when we combine this with streaming. Let's look at a post page that probably has the content and a comments section. We don't need to render the comments immediately on page load or block on it because it's a secondary feature on the page. This is where we can pull in Suspense and make our page shine. Our code might look as follows: app/posts/[slug]/page.jsx ` Our PostComments are a server component that renders static content again, but we don't want its render to block our page from being served to the client. What we've done here is moved the fetch operation into the comments component and wrapped it in a Suspense boundary in our page to defer its render until its content has been fetched and then stream it onto the page into its render location. We could also add a fallback to our suspense boundary if we wanted to put a skeleton loader or other indication UI. With these changes, we're writing components similarly to how we've written them on the client historically but simplified our data fetch. What happens when we start to progressively enhance our features with client-side JavaScript? Client Components with RSCs All our examples focused on staying in the server context which is great for simple applications, but what happens when we want to add interactivity? If you were to put a useState, useEffect, onClick, or other client-side React feature into a server component, you'd find some error messages because you can't run client code from a server context. If we think back to our PHP example, that makes a lot of sense why this is the case, but how do we work around this? For me, this is where my first really mental challenge with RSCs started. Let's use our PostComments as an example to enhance by in-place sorting the section from the server. ` In this example, we're using a server component the same way as our previous example to do the initial data fetch and stream when ready. However, we're immediately passing the results to a client component that renders the elements and enhances our code with a list of sort options. When we select the sort we want, our code makes a request to the server at a predefined route and gets the new data that we re-render in the new order on screen. This is how we might have done things without RSCs before but without a useEffect for our initial rendering. If you're familiar with the old controller-view pattern, this is relatively similar to that pattern, but we have to relegate client re-fetching to the view (client) component, where we might have had all fetch and re-fetch patterns in the controller (server) component Another way to solve this same problem is leveraging server actions, but that would cause the page to re-render. Given the caching mechanisms in Next.js, this is probably fine, but it's not the user experience people are expecting. Server actions are a topic of their own, so I won't cover them in this post, but they're important for the holistic ecosystem experience in the new mindset. Interleaving Nested Server & Client Components These examples have shown a clean approach where we keep our server components at the top of our rendering tree and have a clear line where we move from server mode to client mode. But one of the advantages of RSCs is that we can interleave where our server component entry points may exist. Let's think about a product carousel on a storefront page for example. We may have built this as follows before: ` Here we're rendering carousels that render their cards and our tree goes server -> client -> server. This is not allowed in the new paradigm because the React compiler cannot detect that we moved back into a server component when we called ProductCards from a client component. Instead, we would need to refactor this to be: ` Here, we've changed ProductCarousel to accept children that are our ProductCards server component. This allows the compiler to detect the boundary and render it appropriately. I'd also recommend adding Suspense boundaries to these carousels but I omitted it for the sake of brevity in this example. Some Suggested Best Practices Our team has been using these new patterns for some time and have developed some patterns we've identified as best practices for us to help keep some of these boundaries clear that I thought worth sharing. 1. Be explicit with component types We've found that being explicit with component types is essential to expressing intent. Some components are strictly server, some are strictly client, and others can be used in both contexts. Our team likes using the server-only package to express this intent but we found we needed more. We've opted for the following naming conventions: Server only components: component-name.server.(jsx|tsx) Client only components: component-name.client.(jsx|tsx) Universal components: component-name.(jsx|tsx) This does not apply to special framework file names but we've found this helps us delineate where we are and to help with interleaving. 2. Defer Fetch when Cache is Available If we're trying to render a component that is a collection of other components, we've found deferring the fetch to the child allows our cache to do more for us in rendering in cases where the same element may exist in different locations. This is similar to how GraphQL's data loaders works and can ideally boost the performance of cached server components. So, in our product example above, we may only fetch the IDs of the products we need for the ProductCards and then fetch all the data per card. Yes, this is an extra fetch and causes an N+1, but if our cache is in play, end users will feel a performance gain. 3. Colocate loaders and queries If you're using GraphQL or need loading states for components for Suspense fallback, we recommend colocating those elements in the same file or directory. This makes it easier to modify and manage related elements for your components in a more meaningful way. 4. Use Suspense to defer non-essential content This will depend on your website and needs. Still, we recommend deferring as many non-essential elements to Suspense as possible. We define non-essential to be anything you could consider secondary to the page. On a blog post, this could be recommended posts or comments. On a product page, this could be reviews and related products. So long as the primary focus of your page is outside a Suspense boundary, your usage is probably acceptable. Conclusion RSCs represent a significant evolution in the React ecosystem, offering new paradigms and opportunities for improving the architecture of web applications. They enable multiple server entry points on a single page, optimizing server-side rendering, and simplifying data fetching. RSCs allow for a clearer separation between server and client functionality, enhancing both performance and maintainability. To make the most of RSCs, developers should consider best practices such as being explicit with component types, deferring fetch when caching is available, colocating loaders and queries, and using Suspense to defer non-essential content. Embracing these practices can help harness the potential of React Server Components and pave the way for more efficient and interactive web applications. We're excited about this development in the React ecosystem and the developments happening across teams and frameworks that are opting into using them. While Next.js offers a great solution, we're excited to see similar enhancements to Remix and RedwoodJS....

Feb 2, 2024

9 mins

ReactNextJSArchitecture

Next.js Route Groups

Starting from Next.js 13.4, Vercel introduced the App Router with a whole set of new and exciting features. The way we organize the routing in our application has changed radically compared to previous versions of Next.js, as well as the definition and usage of Layouts for our pages. In this article, we will focus on what is called Route Groups, their use cases, and how they can help us in our developer experience. Basic introduction to the new App Router In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more. The App Router works in a new directory named app Creating a page.tsx file inside the app/test-page folder allows you to define what users are going to see when they navigate to /test-page. So folder’s names inside app directory define your app routes. You can also have nested routes like this: In this case, the URL of your page will be /test-page/nested-page By default, components inside app are React Server Components. This is a performance optimization and allows you to easily adopt them, and you can also use Client Components. Layouts In Next.js, a Layout file is a special component that is used to define the common structure and layout of multiple pages in your application. It acts as a wrapper around the content of each page, providing consistent styling, structure, and functionality. The purpose of a Layout file is to encapsulate shared elements such as headers, footers, navigation menus, sidebars, or any other components that should be present on multiple pages. By using a Layout file, you can avoid duplicating code across multiple pages and ensure a consistent user experience throughout your application. To create a Layout file in Next.js, you typically create a separate component file, such as Layout.tsx, and define the desired layout structure within it. This component can then be imported and used on individual pages where you want to apply the shared layout. By wrapping your page content with the Layout component, Next.js will render the shared layout around each page, providing a consistent look and feel. This approach simplifies the management of common elements and allows for easy updates or modifications to the layout across multiple pages. Here is an example of how to use a Layout file with the new App Router Route Groups In Next.js, the folders in your app directory usually correspond to URL paths. But if you mark a folder as a Route Group, it won't be included in the URL path of the route. This means you can organize your routes and project files into groups without changing the URL structure. Route groups are helpful for: 1. Organizing routes into groups based on site sections, intent, or teams. 2. Creating nested layouts within the same route segment level: - You can have multiple nested layouts in the same segment, even multiple root layouts. - You can add a layout to only a subset of routes within a common segment. To create a route group inside your app folder you just need to wrap the folder’s name in parenthesis: (folderName) Since route groups won’t change the URL structure your page.tsx content will be shown under the/inside-route-group path. Use cases Route groups are amazing when you want to create multiple layouts inside your page: Or if you want to specify a layout for a specific group of pages You need to be careful because all the examples above can lead you to some misunderstanding. *What is root layout? The top-most layout is called the Root Layout. This required layout is shared across all pages in an application.* As you can see, the route folder in the two examples above always has a well-defined root layout. This means that the specific layouts we have defined for the various groups will not replace the root layout, but will be added to it. However, Route Groups also allow us to redefine the root layout. Specifically, they allow us to define different root layouts for different segments of pages. All we have to do is remove the common Root Layout file, create some Route groups, and re-define the different Root layout files for every group in the route folder: In this way, we will have pages with different root layouts, and our paths will once again not be affected by the folder name used in parentheses. Conclusion In conclusion, Next.js route groups offer a powerful and flexible solution for organizing and managing routes in your Next.js applications. By grouping related routes together, you can improve code organization, enhance maintainability, and promote code reusability. Route groups allow for the use of shared layout components, and the customization of root layouts for different segments of pages. With Next.js route groups, you can streamline your development process, create a more intuitive routing structure, and ultimately deliver a better user experience....

Feb 7, 2024

6 mins

NextJSReact

React Contributor Days

React Contributor Days React Contributor Days was a chance for core React maintainers and contributors to come together and talk about the future of React. From discussions on the future of React with React 18 to discussing core web vitals, this was a chance for experts in the React community to come together, and have an open discussion about the state of the framework. Panelists and Hosts Here were the panelists who joined us for React Contributor Days: - Romello Goodman, @mellogood - Colby Fayock, @colbyfayock - Brandon Bayer, @flybayer - Lenz Weber, @phry - Evan Bacon, @Baconbrix - Jen Luker, @knitcodemonkey - Debbie O'Brien, @debs_obrien - Cassidy Williams, @cassidoo - Chantastic, @chantastic - Ben Ilegbodu, @benmvp - James Quick, @jamesqquick - Ryan Burgess, @burgessdryan - Katherine Peterson, @katherinecodes - Tomek Sułkowski, @sulco - Ward Peeters, @wardpeet - Megan Sullivan, @meganesulli - Johnny Burger, @JNYBGR Hosting the Event: - Tracy Lee, @ladyleet - Shaundai Person, @shaundai The React Working Group The React Working Group was one of the biggest takeaways from React Contributor Days. This discussion was born out of an attempt to be as open and inclusive to the ideas and needs of the React community regarding React 18. In the React Working Group, there are brilliant discussions for developers to contribute to: - Explain it to me like I'm 5: A discussion geared towards defining terms used in other discussions. - Introducing React 18: The very first post in the Working Group. - Installing React 18 Alpha: A post introducing users to React 18 Alpha, along with the npm command to install it One thing stressed during contributor days was the importance of including as many voices in the working group as possible. A specific effort was made NOT to include some of the more well-known names in React to ensure the voices of others have a chance to be heard. Click on the link, and check out the React Working Group right now! How to upgrade to React 18 on the Client Here is the post in the Working Group which talks about upgrading to React v18. Since it's pretty quick, I want to include a few of their code snippets here as an additional reference. There are 2 main steps to upgrading to v18: - Install the latest React 18 release - Switch to the new root API Use the following command to install React 18. npm install react@alpha react-dom@alpha To use the new root API, find the line of code that renders the application component to the DOM. It should look similar to this: ` Replace that with this: ` Check out the discussion for more details! Core Web Vitals Shaundai Person set off the discussion by asking the question, "What are Core Web Vitals, and how does it relate to web performance?" Kristofer Baxter responds, "Core Web Vitals are a set of metrics that were created to try and find a common way to define page experience type metrics across the web." The most common theme among the questions was user experience, and the idea that we develop on machines much more powerful than the average user device. Here were some quotes from a few panelists when they were asked about performance: On the subject of testing web performance: > "Slow everything down" > -- Lenz Weber On the subject of where a developer can start with web performance: > "The generic advice is to start simple. Load your document with emulated slow settings in your local environment. Those emulated slow settings allow you to see things that you normally wouldn't see because your hardware is so powerful. See what your user sees on a lower-end device." > "See what users see, and your metrics will follow." > -- Kristofer Baxter Kristofer went on into more detail on where a developer can start with tackling web vitals. Check out the rest of his details here. Conclusion React Contributor Days allowed maintainers and developers to come together and drive discussion around the growth of React. If you still haven't had the chance to listen to the whole thing, it's jam-packed with more information and advice, suitable for every React dev. Take some time to watch their talk, and visit the React Working Group to stay up-to-date on all things React 18!...

Sep 23, 2021

4 mins

React

Improving INP in React and Next.js

Improving INP in React and Next.js In one of my previous articles, I've explained what INP is, how it works, and how it may affect your website. I also promised you to follow up with more concrete advice on how to improve your INP in your favorite framework. This is the follow-up article, where I'll focus on how to improve your INP score in React and Next.js. How to prepare for INP in React and Next.js? The first thing to do is to ensure you're using the latest version of React. The React team has been working on making React more INP-friendly and has already made some improvements in the latest versions. To enhance your INP score, consider fully taking advantage of new features introduced in React 18, such as Concurrent Rendering, Automatic Batching, and Selective Hydration. However, there are also some general areas to focus on, such as SSR and SSG in Next.js, Web Workers, or optimizing your hooks and state management. Concurrent Rendering The Concurrent Mode in React uses an algorithm that breaks rendering down into so-called "fiber nodes" and schedules the renders based on their expiration and priority. This effectively allows the user to interact with the page while the rendering is still in progress. In previous React versions, all updates, such as setState calls were treated as "urgent" and once the re-render had started, there was no way to interrupt it. Concurrent Mode changes this by being able to prioritize the updates and interrupt a non-blocking state update started with startTransition. For a simple explanation of concurrency in React, you can check out Dan Abramov's explanation. As part of the Concurrent Mode, React introduced several lifecycle methods that allow you to prioritize the rendering of certain parts of your UI, such as: - useTransition hook that allows you to update the state without blocking the UI, - useDeferredValue hook that allows you to defer the rendering of certain parts of your UI, - startTransition API that, similarly to the useTransition hook lets you mark a state update as non-blocking. It lacks, however, an indication of whether it's still pending. Automatic Batching Introduced in React 18, Automatic Batching reduces the number of re-renders that happen on state changes even when they happen outside of event handlers, e.g. in a setTimeout or Promise callback. This feature comes out of the box and you don't have to do anything to enable it, and it makes a great argument for upgrading to React 18. Selective Hydration Selective Hydration allows you to take hydration off the main thread by wrapping your components in a Suspense boundary. This way, components can become interactive faster as the browser can do other work on the main thread while the hydration is happening. To fully take advantage of selective hydration, consider the following: - Prioritizing Above-the-Fold Content: Use Suspense boundaries strategically around any parts of your application that may take the server longer to deliver to ensure they don’t block critical content from becoming interactive as soon as possible. - Hydration on Interaction: Implementing hydration upon user interaction for non-critical components can drastically reduce the main thread's workload, enhancing INP. Vercel even has a small case study showing how using selective hydration improved the performance of a Next.js site. Server-Side Rendering (SSR) and Static Site Generation (SSG) in Next.js Not everything has to run client-side. Next.js excels in SSR and SSG capabilities, which can significantly impact INP by delivering content to users faster. Optimizing SSR with techniques like incremental static regeneration (ISR) or leveraging SSG for static pages ensures that users can interact with content faster, improving the perceived performance. Workers Offloading heavy computations to Web Workers can free up the main thread, enhancing the responsiveness of React and Next.js applications. This strategy is especially useful when dealing with third-party scripts. Offloading such scripts in Next.js can be easily done by specifying the "worker" strategy on your Script component. Be aware that this feature is not yet stable and does not work with the app directory, though. If you want to take things one step further, you could use Partytown, which helps you offload any resource-intensive scripts to Web Workers. It comes with a React component that you can use to wrap your third-party scripts and offload them to a Web Worker, and it's compatible with Next.js as well. Hooks and State Management State management in React applications can easily get out of hand, leading to unnecessary re-renders and effectively an increased INP. Sometimes, using a state management library like Redux or MobX can help you consolidate your state and reduce the number of re-renders. However, they are not silver bullets and can also introduce performance issues if not used properly. If you are dealing with a lot of re-renders due to prop changes, make sure you are leveraging memoization. As of now, you may need to work with useMemo and useCallback hooks to memoize your values and functions, respectively. The upcoming React 19’s Forget Compiler, however, will apparently memoize everything under the hood, making these hooks obsolete. Using memoization properly can help you reduce the number of re-renders and improve your INP. To investigate your hook dependencies and re-renders, you can leverage React Developer Tools or use this handy helper hook I found on the internet to trace your re-renders: ` Conclusion Improving INP in React and Next.js is not easy and can require much investigation and fine-tuning. Still, it's worth doing to avoid being penalized by Google in its search results and provide a better experience for your users. Adopting React 18's new features, leveraging SSR and SSG in Next.js, utilizing Web Workers, and optimizing hooks and state management can significantly boost your INP score and deliver a faster application to your users. Remember, INP is just one among many performance metrics emphasizing the need for a comprehensive approach to performance optimization...

Apr 19, 2024

5 mins

Web PerformanceReactNextJSJavaScript

How to make Videos with React using Remotion

How to make Videos with React using Remotion

Remotion

Initializing a Remotion Video Project

The Blank Remotion Template

The Composition component

Simple animations with `interpolate`

The Sequence component

Putting the 'World' in 'Hello, World!'

Conclusion

Matthew Pagan

You might also like

Demystifying React Server Components

Next.js Route Groups

React Contributor Days

Improving INP in React and Next.js

You might also like

Demystifying React Server Components

Next.js Route Groups

React Contributor Days

Improving INP in React and Next.js

How to make Videos with React using Remotion

Remotion

Initializing a Remotion Video Project

The Blank Remotion Template

The Composition component

Simple animations with interpolate

The Sequence component

Putting the 'World' in 'Hello, World!'

Conclusion

Matthew Pagan

Demystifying React Server Components

Next.js Route Groups

React Contributor Days

Improving INP in React and Next.js

Demystifying React Server Components

Next.js Route Groups

React Contributor Days

Improving INP in React and Next.js

Simple animations with `interpolate`