React Performance ⚡

epic-react/react-performance

Why Performance

• better UX

Lazy loading

import React from "react";
const Dashboard = React.lazy(
    () => import(/* webpackChunkName: "Dashboard" */ "../Pages/Dashboard")
);

Note

The Webpack magic comment webpackChunkName determines the downloaded chunk name.

Memoization

Storing processed functions based on received props, avoiding the memory effort to the same component.

• React Memo

import React from "react";
const Comp = () => (
    <div className="mt-3">
        <h1>Title</h1>
    </div>
);
export default React.memo(Comp);

---

Last update: 2023-04-24