Advanced React Performance Optimization: Memoization, Lazy Loading và Code Splitting

React application khi phát triển lớn thường gặp vấn đề về performance. Trong bài viết này chúng ta sẽ tối ưu React bằng:

• React.memo
• useMemo
• useCallback
• Lazy Loading
• Code Splitting

1. React.memo

React.memo giúp tránh re-render không cần thiết.

import React from "react";

const UserCard = React.memo(function UserCard({ name }) {
  console.log("render user card");
  return <div>{name}</div>;
});

export default UserCard;

2. useMemo

import { useMemo } from "react";

function ExpensiveComponent({ num }) {

  const expensiveCalculation = (n) => {
    console.log("calculating...");
    return n * 1000;
  };

  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <h1>{result}</h1>;
}

3. useCallback

import { useState, useCallback } from "react";

function App(){

 const [count,setCount]=useState(0)

 const handleClick = useCallback(()=>{
  console.log("clicked")
 },[])

 return(
  <button onClick={handleClick}>
   Click
  </button>
 )

}

4. Lazy Loading

import React, { Suspense } from "react";

const Dashboard = React.lazy(()=>import("./Dashboard"));

function App(){

 return(
  <Suspense fallback={<h1>Loading...</h1>}>
   <Dashboard/>
  </Suspense>
 )

}

5. Code Splitting

import("./analytics").then(module=>{
 module.track()
})

YouTube Tutorial

https://www.youtube.com/watch?v=0ZJgIjIuY7U