Phần 7: Tối ưu hóa render trong React

// Khi state thay đổi (hooks, cách viết phổ biến 2025+)
setCount(count + 1);

// React sẽ:
// 1. Tạo Virtual DOM mới với count đã cập nhật
// 2. So sánh với Virtual DOM cũ (Fiber reconciler)
// 3. Tìm ra sự khác biệt (count đã thay đổi)
// 4. Chỉ cập nhật phần DOM thật chứa count

// Không tốt - không có key
{
  items.map((item) => <ListItem item={item} />);
}

// Tốt - có key ổn định
{
  items.map((item) => <ListItem key={item.id} item={item} />);
}

Render Phase (có thể ngắt):
1. componentWillReceiveProps (deprecated)
2. static getDerivedStateFromProps
3. shouldComponentUpdate
4. componentWillUpdate (deprecated)
5. render

Commit Phase (không thể ngắt):
1. getSnapshotBeforeUpdate
2. Cập nhật DOM
3. componentDidMount / componentDidUpdate

// Không tốt - tạo object mới mỗi lần render
function ParentComponent() {
  return <ChildComponent options={{ color: "red" }} />;
}

// Tốt - sử dụng useMemo để giữ tham chiếu ổn định
function ParentComponent() {
  const options = useMemo(() => ({ color: "red" }), []);
  return <ChildComponent options={options} />;
}

// Không tốt - component con sẽ re-render mỗi khi parent re-render
function ChildComponent({ name }) {
  return <div>{name}</div>;
}

// Tốt - component con chỉ re-render khi props thay đổi
const ChildComponent = React.memo(function ChildComponent({ name }) {
  return <div>{name}</div>;
});

// Không tốt - mọi component con sẽ re-render khi value thay đổi
function App() {
  const [state, setState] = useState({ user: {}, theme: "light" });
  return (
    <AppContext.Provider value={state}>
      <DeepComponent />
    </AppContext.Provider>
  );
}

// Tốt - tách context để giảm re-render
function App() {
  return (
    <UserProvider>
      <ThemeProvider>
        <DeepComponent />
      </ThemeProvider>
    </UserProvider>
  );
}

// Props drilling
function App() {
  const [user, setUser] = useState({ name: "John" });
  return <Header user={user} />;
}

function Header({ user }) {
  return <Navigation user={user} />;
}

function Navigation({ user }) {
  return <UserMenu user={user} />;
}

function UserMenu({ user }) {
  return <div>Hello, {user.name}</div>;
}

// Không tốt - một state lớn
const [state, setState] = useState({
  user: {
    /* ... */
  },
  posts: [
    /* ... */
  ],
  comments: [
    /* ... */
  ],
  preferences: {
    /* ... */
  },
});

// Tốt - chia nhỏ state theo chức năng
const [user, setUser] = useState({
  /* ... */
});
const [posts, setPosts] = useState([
  /* ... */
]);
const [comments, setComments] = useState([
  /* ... */
]);
const [preferences, setPreferences] = useState({
  /* ... */
});

// Không tốt - cập nhật trực tiếp state object
function updateUser(newName) {
  const newState = state;
  newState.user.name = newName;
  setState(newState); // Không gây re-render vì tham chiếu không thay đổi
}

// Tốt - tạo state mới với spread operator
function updateUser(newName) {
  setState((prevState) => ({
    ...prevState,
    user: {
      ...prevState.user,
      name: newName,
    },
  }));
}

npm install --save-dev babel-plugin-react-compiler
# Cho React Compiler ESLint plugin kiểm tra code có tuân Rules of React
npm install --save-dev eslint-plugin-react-compiler

// babel.config.js (Vite, CRA-free)
module.exports = {
  plugins: [
    [
      "babel-plugin-react-compiler",
      {
        /* target: "19" */
      },
    ],
  ],
};

// next.config.js (Next.js 15+)
module.exports = {
  experimental: { reactCompiler: true },
};

function ProductList({ products, filter }) {
  const visible = useMemo(
    () => products.filter((p) => p.category === filter),
    [products, filter]
  );
  const handleClick = useCallback((id) => onSelect(id), [onSelect]);
  return visible.map((p) => (
    <Item key={p.id} product={p} onClick={handleClick} />
  ));
}

function ProductList({ products, filter }) {
  const visible = products.filter((p) => p.category === filter);
  const handleClick = (id) => onSelect(id);
  return visible.map((p) => (
    <Item key={p.id} product={p} onClick={handleClick} />
  ));
}

// Chỉ re-render khi props thay đổi
const MemoizedComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

// Tùy chỉnh logic so sánh props
const MemoizedComponent = React.memo(
  function MyComponent(props) {
    /* render using props */
  },
  (prevProps, nextProps) => {
    // Return true nếu muốn bỏ qua render
    return prevProps.id === nextProps.id;
  }
);

// Chỉ tính toán lại khi dependencies thay đổi
const memoizedValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

// Giữ tham chiếu ổn định cho objects
const memoizedObject = useMemo(() => {
  return { id, name, details };
}, [id, name, details]);

// Không tốt - tạo hàm mới mỗi lần render
function ParentComponent() {
  const handleClick = () => {
    console.log("Clicked!");
  };

  return <ChildComponent onClick={handleClick} />;
}

// Tốt - giữ tham chiếu ổn định cho callback
function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Clicked!");
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

// Thay vì import trực tiếp
import OtherComponent from "./OtherComponent";

// Sử dụng import động
const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

// Suspense với nhiều component lazy, phải định nghĩa component TRƯỚC rồi mới dùng
const Comments = React.lazy(() => import("./Comments"));
const Photos = React.lazy(() => import("./Photos"));

function MyComponent() {
  return (
    <Suspense fallback={<Loading />}>
      <Section>
        <Comments />
        <Photos />
      </Section>
    </Suspense>
  );
}

import { BrowserRouter, Routes, Route } from "react-router-dom";
import React, { Suspense } from "react";

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

import { FixedSizeList } from "react-window";

function ListComponent({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>{items[index].name}</div>
  );

  return (
    <FixedSizeList
      height={500}
      width={300}
      itemCount={items.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

import { List, AutoSizer } from "react-virtualized";

function VirtualizedList({ items }) {
  const rowRenderer = ({ key, index, style }) => {
    const item = items[index];
    return (
      <div key={key} style={style}>
        {item.name}
      </div>
    );
  };

  return (
    <div style={{ height: "500px" }}>
      <AutoSizer>
        {({ height, width }) => (
          <List
            width={width}
            height={height}
            rowCount={items.length}
            rowHeight={35}
            rowRenderer={rowRenderer}
          />
        )}
      </AutoSizer>
    </div>
  );
}

import { Profiler } from "react";

function onRenderCallback(
  id, // id của Profiler tree đã commit
  phase, // "mount" (lần đầu) hoặc "update" (re-render)
  actualDuration, // thời gian render component
  baseDuration, // thời gian ước tính nếu render toàn bộ subtree
  startTime, // thời điểm React bắt đầu render
  commitTime, // thời điểm React commit thay đổi
  interactions // Set các "interactions" đã gây ra update
) {
  console.log(`${id} took ${actualDuration}ms to render`);
}

function MyComponent() {
  return (
    <Profiler id="MyComponent" onRender={onRenderCallback}>
      <ChildComponent />
    </Profiler>
  );
}

// pages/ssr-page.js
export async function getServerSideProps(context) {
  // Fetch data từ API
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  // Trả về props cho component
  return {
    props: { data }, // Sẽ được truyền vào component
  };
}

function SSRPage({ data }) {
  return <div>{data.title}</div>;
}

export default SSRPage;

// pages/ssg-page.js
export async function getStaticProps() {
  // Fetch data tại build time
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: { data },
    // Revalidate sau 60 giây (Incremental Static Regeneration)
    revalidate: 60,
  };
}

function SSGPage({ data }) {
  return <div>{data.title}</div>;
}

export default SSGPage;

// pages/isr-page.js
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: { data },
    // Trang sẽ được re-generate sau 60 giây
    revalidate: 60,
  };
}

export async function getStaticPaths() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  // Pre-render chỉ những paths này tại build time
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  // { fallback: 'blocking' } sẽ server-render pages
  // khi path không được pre-render
  return { paths, fallback: "blocking" };
}

function Post({ data }) {
  return <div>{data.title}</div>;
}

export default Post;

// Server renders với timezone của server
function ServerComponent() {
  const date = new Date();
  return <div>{date.toString()}</div>;
}

// Client hydrates với timezone của client
// => Hydration mismatch!

// Sử dụng dữ liệu không phụ thuộc môi trường
function Component({ serverData }) {
  return <div>{serverData}</div>;
}

// Hydrate component quan trọng trước
<Suspense fallback={<div />}>
  <CriticalComponent />
</Suspense>

// Hydrate component ít quan trọng sau
<Suspense fallback={<div />}>
  <NonCriticalComponent />
</Suspense>

// Static HTML (không cần hydration)
<StaticHeader />

// Interactive island (cần hydration)
<InteractiveSearchBox />

// Static HTML (không cần hydration)
<StaticContent />

// Interactive island (cần hydration)
<InteractiveCommentSection />

// Static HTML (không cần hydration)
<StaticFooter />

---
// Astro component
import ReactCounter from '../components/ReactCounter.jsx';
---

<html>
  <body>
    <h1>Static content</h1>

    <!-- Island of React -->
    <ReactCounter client:visible />

    <p>More static content</p>
  </body>
</html>

// ServerComponent.server.js (chạy trên server)
import { db } from '../database';

export default async function ServerComponent() {
  const data = await db.query('SELECT * FROM posts');

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

// ClientComponent.client.js (chạy trên client)
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

// App.js (kết hợp cả hai)
import ServerComponent from './ServerComponent.server';
import ClientComponent from './ClientComponent.client';

export default function App() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

// SSR truyền thống
// 1. Render toàn bộ App trên server
// 2. Gửi HTML đến client
// 3. Tải JavaScript
// 4. Hydrate toàn bộ App

// React Server Components
// 1. Render ServerComponents trên server
// 2. Gửi kết quả render + Client Components đến client
// 3. Hydrate chỉ Client Components

// app/page.js (Server Component mặc định)
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return (
    <main>
      <h1>{json.title}</h1>
      <ClientComponent />
    </main>
  );
}

// app/client-component.js
'use client'; // Đánh dấu là Client Component

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

export default function ProductPage() {
  return (
    <>
      <Header /> {/* render ngay */}
      <Suspense fallback={<SkeletonReviews />}>
        <Reviews /> {/* stream khi data sẵn sàng */}
      </Suspense>
      <Suspense fallback={<SkeletonRecs />}>
        <Recommendations /> {/* stream độc lập với Reviews */}
      </Suspense>
    </>
  );
}

// app/products/[id]/page.jsx
export const experimental_ppr = true;

export default function Product({ params }) {
  return (
    <>
      <ProductDetail id={params.id} /> {/* static shell */}
      <Suspense fallback={<SkeletonCart />}>
        <CartStatus /> {/* dynamic, cookie-based */}
      </Suspense>
    </>
  );
}

"use server";
export async function createPost(prev, formData) {
  const title = formData.get("title");
  const post = await db.post.create({ data: { title } });
  return { ok: true, id: post.id };
}

"use client";
import { useActionState } from "react";
import { createPost } from "./actions";

export function NewPostForm() {
  const [state, action, pending] = useActionState(createPost, null);
  return (
    <form action={action}>
      <input name="title" />
      <button disabled={pending}>Save</button>
      {state?.ok && <p>Created #{state.id}</p>}
    </form>
  );
}