Cứu Tinh Hiệu Năng React: Đừng Để useContext 'Âm Thầm' Giết Chết Tốc Độ Ứng Dụng Của Bạn!

Lê Lân

03/07/2025

Cách Giải Quyết Vấn Đề Hiệu Suất Khi Sử Dụng React Context Toàn Cục

Mở Đầu

Trong phát triển ứng dụng React, Context API thường được dùng làm công cụ quản lý trạng thái toàn cục. Tuy nhiên, việc sử dụng Context một cách không hợp lý có thể dẫn đến vấn đề nghiêm trọng về hiệu suất — một cập nhật nhỏ trong dữ liệu sẽ khiến toàn bộ các component tiêu thụ context phải re-render, gây giảm tốc độ và trải nghiệm người dùng kém.

Bài viết này sẽ phân tích sâu về vấn đề hiệu suất phổ biến khi dùng Context API và giới thiệu giải pháp hiệu quả thay thế bằng useContextSelector — giúp chỉ cập nhật lại những component thực sự cần thay đổi dữ liệu, mang lại trải nghiệm mượt mà hơn cho ứng dụng React.

Vấn Đề Hiệu Suất Khi Dùng React Context Làm Global State

Tại Sao React Context Gây Ra Vấn Đề

React Context được tạo ra để chia sẻ dữ liệu giữa các component mà không cần truyền props qua từng tầng. Mặc định, bất cứ khi nào giá trị của context thay đổi, tất cả component có sử dụng hook useContext hay component tiêu thụ context đều bị re-render lại.

Ví Dụ Thực Tế

Giả sử trong một dashboard, chúng ta có nhiều component dùng chung bộ lọc dữ liệu (filters). Khi một toggle filter thay đổi, toàn bộ các component tiêu thụ context về filters đều re-render, kể cả những component không liên quan đến phần dữ liệu bị thay đổi.

Hậu quả: Việc re-render toàn bộ cây component không chỉ làm ứng dụng chậm mà còn làm giảm hiệu năng hiển thị, đặc biệt trên các trang có nhiều thành phần giao diện.

Giải Pháp: Dùng useContextSelector Để Giải Quyết Vấn Đề Re-render Toàn Bộ

Giới Thiệu useContextSelector

Thư viện use-context-selector cung cấp một hook tương tự useContext nhưng cho phép lấy ra một phần cụ thể của context. Nhờ đó, khi phần context này không thay đổi, component sẽ không bị re-render.

Cách Cài Đặt

Chạy lệnh cài đặt:

npm install use-context-selector

Ví Dụ Thay Thế Sử Dụng

Thay vì:

const { filters } = useContext(AppContext);

Bạn dùng:

const filters = useContextSelector(AppContext, ctx => ctx.filters);

Điều này đảm bảo chỉ các component dùng filters mới re-render, không phải toàn bộ component tiêu thụ context.

Ví Dụ Làm Việc Chi Tiết

import { createContext, useContextSelector } from 'use-context-selector';
import React, { useState } from 'react';

const AppContext = createContext(null);

function Provider({ children }) {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const value = { count, setCount, text, setText };

  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

function CountDisplay() {
  const count = useContextSelector(AppContext, ctx => ctx.count);
  console.log('Render: CountDisplay');
  return <div>Count: {count}</div>;
}

function TextDisplay() {
  const text = useContextSelector(AppContext, ctx => ctx.text);
  console.log('Render: TextDisplay');
  return <div>Text: {text}</div>;
}

Giải Thích

Khi count thay đổi, chỉ CountDisplay re-render.

Khi text thay đổi, chỉ TextDisplay re-render.

Nếu dùng useContext thông thường, cả hai component đều sẽ re-render bất kể dữ liệu nào bị thay đổi.

Việc tách bạch này giúp tối ưu hiệu suất và làm cho ứng dụng chạy mượt mà hơn rất nhiều.

Lợi Ích Khi Sử Dụng useContextSelector

Ưu Điểm Chính

Cập nhật có phạm vi: Chỉ cập nhật những phần thực sự bị thay đổi.

Giảm số lần render thừa: Không phải toàn bộ component trong context đều re-render.

Dễ dàng tích hợp: Cấu trúc code thay đổi rất nhỏ, dễ áp dụng cho dự án có sẵn.

Giúp cải thiện khung hình mỗi giây (FPS): Tăng trải nghiệm người dùng cho app phức tạp.

Bảng So Sánh

Đặc điểm	useContext (truyền thống)	useContextSelector
Cập nhật phạm vi	Toàn bộ context	Chỉ phần dùng trong component
Render lại	Nhiều component không cần	Ít component hơn, chính xác hơn
Độ phức tạp	Thấp	Thêm thư viện, nhưng dễ sử dụng
Hiệu suất	Thấp khi state lớn	Cao, phù hợp app phức tạp

Kết Luận

Sử dụng React Context làm global state có thể tạo ra vấn đề hiệu suất nghiêm trọng khi có nhiều component phụ thuộc. Việc áp dụng useContextSelector từ thư viện use-context-selector sẽ giúp bạn giảm thiểu số lần re-render, tăng tốc độ render và cải thiện trải nghiệm người dùng ngay lập tức.

Lời khuyên: Tránh dùng useContext cho state thay đổi thường xuyên. Thay vào đó, hãy sử dụng useContextSelector để có hiệu năng tối ưu và dễ dàng bảo trì.

Hãy thử áp dụng ngay hôm nay để tận hưởng hiệu suất mượt mà trên các ứng dụng React phức tạp!

Tham Khảo

use-context-selector GitHub repository

Dan Abramov, "You Might Not Need Redux", React Conf 2019

React Official Documentation - Context API

Article: "Optimizing React Context Performance", LogRocket Blog, 2023 August 15, 2023