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...
#react
48개의 노트
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...
component's lifecycle
In React functional components, **lifecycle-like behaviors** are achieved ==using hooks==:
Concurrent React (Concurrent Mode)
Concurrent React, previously referred to as Concurrent Mode, is a set of new features in React that allows React to interrupt the rendering process to...
Context
Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context is primarily used wh...
Features of React
Use of Virtual DOM instead of Real DOM, JSX, Server-side rendering, Unidirectional data flow or data binding, Reusable components, etc.
Fragments
React doesn't allow returning multiple elements from a component. You can use fragments to return multiple elements.
Higher-Order Components (HOCs)
A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it's a pattern that is derived from React'...
Hydration
Hydration is the process of using client-side JavaScript to add interactivity to the markup generated by the server. When you use server-side renderin...
Pure Components
Pure components re-render only when the props passed to the component changes. For example, if you have a pure child component inside a parent compone...
Reconciliation
Reconciliation is the process through which React updates the DOM by comparing the newly returned elements with the previously rendered ones. React up...
ref forwarding
By default, each component’s DOM nodes are private. However, sometimes it’s useful to expose a DOM node to the parent—for example, to allow focusing i...
Refs
Refs are used to get reference to a DOM node or an instance of a component. They help to access the DOM nodes or React elements created in the render ...
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...
What is a React
React, is an open-source JavaScript library for building user interfaces (UIs). It was developed and is maintained by Meta, and is widely used by deve...
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...
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
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...
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
React Fiber
Understanding React Fiber reconciliation engine
Prop Drilling
How React handles prop drilling and its downsides
Real DOM vs Virtual DOM
Understanding the difference between Real DOM and Virtual DOM
Server Components Data Fetching
How React Server Components handle data fetching
Rendering Static HTML String
How to render React components as static HTML string
How React Virtual DOM Works
Understanding how React's Virtual DOM works
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.