Free Resources
Web Performance: Budgeting for the Critical Rendering Path
Recommended Articles
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
A Look Inside the React with Michael Jackson, Devon Lindsey, Preethi Kasireddy, and Ben Ilegbodu
The React community is has been creating some amazing tools. We sat down with members of the community to hear about the tools that are working well for them and what new technologies are peaking their interest. Currently trending topics include React Fiber, React-Router and React Native. To keep up with these leading experts, you can connect with them on Twitter or follow their GitHub. Michael Jackson Discusses React-Router v4, React Native and React Fiber React-Router v4 is out and it has something for everyone in the React community. Unlike v2, and v3, the most current version splits everything up to make it more modular. This means that you can render a route anywhere you want, leading to simpler nesting, code-splitting and hot-reloading. This component based variation of React-Router will ideally resolve the need for custom code for routing in React Native and hopefully bridge a significant gap in the React and React Native communities. Michael Jackson hopes v4 will be a step toward strengthening the React community by enhancing code to make discussion between groups more transferable. In addition to React-Router, React Fiber is making waves in the React community by pushing the boundaries in addressing ways to prioritize user interaction while simultaneously allowing for asynchronous event to fire. To hear more about Michael Jackson’s work and thoughts on up and coming technologies, keep up with him at https://github.com/mjackson or @mjackson Devon Lindsey on what to look forward to in the React community Devon Lindsey speaks on the exciting ways to use React in new contexts. As an organizer for SF Bay Area React Meetup, she has unique insight into up an coming React projects like augmented reality or creative uses for Create React App. She even has an NFC implant that she is working to program using React Native to assist with everyday activities. Devon Lindsey discusses the value of the React communities’ emphasis on included and empowering diverse populations and how the effort is paying off in the development of new and interesting React tools. She also gives advice for ways to contribute to open source communities in a positive and constructive way. You can find Devon Lindsey on Twitter: @devonbl Preethi Kasireddy on Redux, MobX and the React Community Only 2 years into her career as an engineer, Preethi Kasireddy is already making a name for herself at a speaker at a number of conferences and working at her own company as a UX/UI Engineer. Preethi finds React enjoyable to work with because of its immediate feedback and interacting with a welcoming community. When she started learning React, she used React in companion to Redux but has since found best use cases for both Redux and MobX. While both help to manage state external to components, the two exist in opposite paradigms. Redux derives from flux architecture and provides one way, predictable data flow, thus it lends itself to maintainability and scalability over time. In Preethi’s opinion, this makes Redux ideal for more complex code bases and large teams. MobX, on the other hand, has a lot of abstractions that it hides under the hood. It uses observable date to store state making it ideal for simpler applications and smaller teams that might not need to rely on the predictability that Redux provides. To learn more about Preethi’s thoughts on React tools, you can follow her on Twitter @iam_preethi Ben Ilegbodu Gives Advice for Learning React and ESNext Ben Illegbodu, an Engineering Manager for Eventbrite, has been transitioning features on Eventbrite from Backbone to React. He has been very involved with ES6 from the very beginning and loves how integral it is with React. In his free time, Ben Ilegbodu likes teaching people about ES6 and how to enhance their understanding of React through ES6 methods like creating classes, arrow functions and destructuring. Ben Ilegbodu has enjoyed working with the React community is unique because of the collaborative environment and the promulgation of innovative ideas through supportive networks. If you are interested in improving your understanding of React, Ben suggests getting started by going through react tutorials and really diving into the basics before adding additional layers of complication. You can find Ben Ilegbodu on Twitter: @benmvp The React community is booming with amazing tools that are changing the fundamentals of how we code. The unique level of diversity and collaboration in the community facilitates unprecedented growth. Stay connected with This Dot Media for more news on what is happening in the community....
Oct 28, 2019
4 mins