import React from “react”;
const DemoComponent = React.memo((props) => {});
2. React.Fragment
In React, it’s essential to wrap the adjoining components within the JSX right into a single ingredient or it would throw an error. For instance, we will’t do one thing like the next.
const DemoComponent = () => {
return (
<h1> Hey World! </h1>
<h1> Say Hello </h1>
<h1> Bye Bye </h1>
)
}
To repair this, builders typically use a <div> tag to wrap the weather.
const DemoComponent = () => {
return (
<div>
<h1> Hey World! </h1>
<h1> Say Hello </h1>
<h1> Bye Bye </h1>
</div>
);
};
It will do the job however it unnecessarily provides an additional node to the DOM tree. To keep away from this, both use React.Fragment or <> </> syntax for declaring fragments.
import React from “react”;
const DemoComponent = () => {
return (
<React.Fragment>
<h1> Hey World! </h1>
<h1> Say Hello </h1>
<h1> Bye Bye </h1>
</React.Fragment>
);
};
3. React.lazy
React.Lazy is a brand new function offered by React to carry out lazy loading. In lazy loading, the efficiency of the appliance is boosted by controlling the loading time of the elements. The element will solely load when it’s required.
To make use of React.Lazy, we have to wrap it inside a “suspense” element. Then, in React.Lazy, it’s required to outline a perform that calls a dynamic import.
import React, { Suspense } from “react”;
const LazyLoadComponent = React.lazy(() => import(“./LazyComponent”));
perform DemoComponent() {
return (
<>
<Suspense fallback={<div>Information loading…</div>}>
<LazyLoadComponent />
</Suspense>
</>
);
}
4. shouldComponentUpdate
A React element re-renders each time the state modifications or new props arrive. However it isn’t at all times essential to re-render a element when the state modifications. So React supplies a particular lifecycle particularly created to regulate the re-rendering of a element.
shouldComponentUpdate() methodology has two parameters – newProps and newStates. It returns a boolean worth. shouldComponentUpdate() can be utilized to optimize the efficiency of a React software by controlling the re-rendering of a element.
This lifecycle methodology is simply supported in class-based elements however related performance may be achieved in practical elements utilizing the useEffect() hook.
5. Controlling lengthy lists
It’s common to come across a scenario the place an extended checklist of knowledge is to be displayed on the display. As an alternative of rendering your entire checklist, to one thing often known as “windowing”.
In windowing, the checklist is rendered in line with the viewport dimension of the browser. In easy phrases, solely that a part of the checklist will probably be rendered that may be seen on the display. The following a part of the checklist will probably be rendered because the person scrolls the checklist.
To carry out “windowing”, you should utilize react libraries equivalent to react-window or react-virtualized.
6. Utilizing reselect
Redux is a third-party state administration library that’s closely used with React. It’s enormous and complex itself and thus it will probably trigger some efficiency points.
