How do you investigate a slow React app and identify performance bottlenecks
There are many reasons why an app might be slow. It could be due to a slow network, a slow backend, or a slow client. It could also be due to a memory...
#performance
38개의 노트
How to lazy load components in React
You can use React's `lazy()` function in conjunction with dynamic `import()` to lazily load a component. This is often combined with `Suspense` to dis...
What could be the reasons for un-necessary re-renders in React
Unnecessary re-renders in components can occur due to several reasons, and it's important to optimize your code to minimize them for better performanc...
What is Clustering in Node.js
Clustering is a technique used to distribute the load across multiple processes. It is used to improve the performance and scalability of Node.js appl...
What is Event Loop in Node.js
The event loop is a single-threaded loop responsible for handling all asynchronous tasks in Node.js. It continuously checks for events and executes as...
Server Components
Server Components allow developers to write components that render on the server instead of the client. Unlike traditional components, Server Componen...
Synthetic Events
React differs from HTML in that it uses a synthetic event system instead of directly binding to the browser’s native events. This system brings consis...
How Do You Investigate A Slow React App And Identify Performance Bottlenecks
There are many reasons why an app might be slow. It could be due to a slow network, a slow backend, or a slow client. It could also be due to a memory...
How To Lazy Load Components In React
You can use React's `lazy()` function in conjunction with dynamic `import()` to lazily load a component. This is often combined with `Suspense` to dis...
What Could Be The Reasons For Un-necessary Re-renders In React
Unnecessary re-renders in components can occur due to several reasons, and it's important to optimize your code to minimize them for better performanc...
Bundle-splitting
When building a modern web application, bundlers such as
Compression
> Compress your JavaScript and keep an eye on your chunk sizes for optimal performance. Overly high JavaScript bundle granularity can help with dedupl...
Dynamic-import
In our chat application, we have four key components: `UserInfo`,
Import-on-interaction
> tl;dr: lazy-load non-critical resources when a user interacts with UI requiring it
Import-on-visibility
Besides user interaction, we often have components that aren't visible on the initial page. A good example of this is lazy loading images that aren't ...
Loading-sequence
**Note:** This article is heavily influenced by insights from the
Prefetch
Prefetch is a browser optimization which allows us to fetch resources that may be needed for subsequent routes or pages before they are needed
Preload
Preload is a browser optimization that allows critical resources (that may be discovered late) to be requested earlier
Prpl
Making our applications globally accessible can be a challenge! We have to make sure the application is performant on low-end devices and in regions w...
Third-party
> tl;dr: Third-party resources can slow down sites and can be a challenge to optimize. You can follow certain best practices to load or delay differen...
Tree-shaking
It can happen that we add code to our bundle that isn't used anywhere in our application. This piece of dead code can be eliminated in order to reduce...
Virtual-lists
In this guide, we will discuss list virtualization (also known as
How to Lazy Load Components in React
Using React's lazy() function with Suspense to load components on demand and improve initial load time
Real DOM vs Virtual DOM
Understanding the difference between Real DOM and Virtual DOM
Investigating Performance Bottlenecks
How to investigate a slow React app and identify performance bottlenecks
Lazy Loading Components
How to lazy load components in React using lazy() and Suspense
Unnecessary Re-renders
What could be the reasons for unnecessary re-renders in React
Selective Hydration
How to use combine streaming server-side rendering with a new approach to hydration, selective hydration
Client-side Rendering
Render your application's UI on the client
Incremental Static Generation
Update static content after you have built your site
Progressive Hydration
Delay loading JavaScript for less important parts of the page
React Server Components
Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle
Server-side Rendering
Generate HTML to be rendered on the server in response to a user request
Static Rendering
Deliver pre-rendered HTML content that was generated when the site was built
Streaming Server-Side Rendering
Generate HTML to be rendered on the server in response to a user request
React rendering basics
Take a deeper dive into React's rendering process and understand the basics behind the popular JavaScript framework.
React rendering optimization
Take a deeper dive into React's rendering process and understand how to make small yet powerful tweaks to optimize performance.
React rendering state
Take a deeper dive into React's rendering process and understand the role of the Context API and Redux in it.