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...
#component
27개의 노트
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...
How does Event Loop work in JavaScript
The Event loop has two main components: the Call stack and the Callback queue.
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...
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
Dynamic-import
In our chat application, we have four key components: `UserInfo`,
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 ...
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
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...
How Does Event Loop Work In JavaScript
The Event loop has two main components: the Call stack and the Callback queue.