29 tháng 8, 2025Tiếng Việt

Hướng dẫn toàn diện về hook useContext của React, bao gồm các mẫu sử dụng và kỹ thuật tối ưu hóa hiệu suất nâng cao để xây dựng ứng dụng hiệu quả, có khả năng mở rộng.

React useContext: Làm chủ việc sử dụng Context và Tối ưu hóa Hiệu suất

Context API của React cung cấp một cách mạnh mẽ để chia sẻ dữ liệu giữa các component mà không cần truyền props qua từng cấp của cây component một cách tường minh. Hook useContext đơn giản hóa việc sử dụng các giá trị context, giúp việc truy cập và sử dụng dữ liệu được chia sẻ trong các functional component trở nên dễ dàng hơn. Tuy nhiên, việc sử dụng useContext không đúng cách có thể dẫn đến các vấn đề về hiệu suất, đặc biệt là trong các ứng dụng lớn và phức tạp. Hướng dẫn này sẽ khám phá các phương pháp tốt nhất để sử dụng context và cung cấp các kỹ thuật tối ưu hóa nâng cao để đảm bảo các ứng dụng React hiệu quả và có khả năng mở rộng.

Hiểu về Context API của React

Trước khi đi sâu vào useContext, chúng ta hãy xem lại ngắn gọn các khái niệm cốt lõi của Context API. Context API bao gồm ba phần chính:

Context: Nơi chứa dữ liệu được chia sẻ. Bạn tạo một context bằng cách sử dụng React.createContext().
Provider: Một component cung cấp giá trị context cho các component con của nó. Tất cả các component được bao bọc trong provider đều có thể truy cập giá trị context.
Consumer: Một component đăng ký nhận giá trị context và sẽ render lại mỗi khi giá trị context thay đổi. Hook useContext là cách hiện đại để sử dụng context trong các functional component.

Giới thiệu về hook useContext

Hook useContext là một hook của React cho phép các functional component đăng ký một context. Nó chấp nhận một đối tượng context (giá trị được trả về bởi React.createContext()) và trả về giá trị context hiện tại cho context đó. Khi giá trị context thay đổi, component sẽ render lại.

Đây là một ví dụ cơ bản:

Ví dụ cơ bản

Giả sử bạn có một theme context:


import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  const value = {
    theme,
    toggleTheme,
  };

  return (
    
      {children}
    
  );
}

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
      Current Theme: {theme}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

Trong ví dụ này:

ThemeContext được tạo bằng React.createContext('light'). Giá trị mặc định là 'light'.
ThemeProvider cung cấp giá trị theme và hàm toggleTheme cho các component con của nó.
ThemedComponent sử dụng useContext(ThemeContext) để truy cập theme hiện tại và hàm toggleTheme.

Những cạm bẫy và vấn đề hiệu suất thường gặp

Mặc dù useContext đơn giản hóa việc sử dụng context, nó cũng có thể gây ra các vấn đề về hiệu suất nếu không được sử dụng cẩn thận. Dưới đây là một số cạm bẫy phổ biến:

Render lại không cần thiết: Bất kỳ component nào sử dụng useContext sẽ render lại mỗi khi giá trị context thay đổi, ngay cả khi component đó không thực sự sử dụng phần cụ thể của giá trị context đã thay đổi. Điều này có thể dẫn đến việc render lại không cần thiết và các vấn đề về hiệu suất, đặc biệt là trong các ứng dụng lớn với các giá trị context được cập nhật thường xuyên.
Giá trị context lớn: Nếu giá trị context là một đối tượng lớn, bất kỳ thay đổi nào đối với bất kỳ thuộc tính nào trong đối tượng đó cũng sẽ kích hoạt việc render lại của tất cả các component sử dụng nó.
Cập nhật thường xuyên: Nếu giá trị context được cập nhật thường xuyên, nó có thể dẫn đến một chuỗi các lần render lại trên toàn bộ cây component, ảnh hưởng đến hiệu suất.

Các kỹ thuật tối ưu hóa hiệu suất

Để giảm thiểu các vấn đề về hiệu suất này, hãy xem xét các kỹ thuật tối ưu hóa sau:

1. Tách Context

Thay vì đặt tất cả dữ liệu liên quan vào một context duy nhất, hãy chia context thành các context nhỏ hơn, chi tiết hơn. Điều này làm giảm số lượng component phải render lại khi một phần dữ liệu cụ thể thay đổi.

Ví dụ:

Thay vì một UserContext duy nhất chứa cả thông tin hồ sơ người dùng và cài đặt người dùng, hãy tạo các context riêng biệt cho mỗi loại:


import React, { createContext, useContext, useState } from 'react';

const UserProfileContext = createContext(null);
const UserSettingsContext = createContext(null);

function UserProfileProvider({ children }) {
  const [profile, setProfile] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateProfile = (newProfile) => {
    setProfile(newProfile);
  };

  const value = {
    profile,
    updateProfile,
  };

  return (
    
      {children}
    
  );
}

function UserSettingsProvider({ children }) {
  const [settings, setSettings] = useState({
    notificationsEnabled: true,
    theme: 'light',
  });

  const updateSettings = (newSettings) => {
    setSettings(newSettings);
  };

  const value = {
    settings,
    updateSettings,
  };

  return (
    
      {children}
    
  );
}

function ProfileComponent() {
  const { profile } = useContext(UserProfileContext);

  return (
    
      Name: {profile?.name}
      Email: {profile?.email}
    
  );
}

function SettingsComponent() {
  const { settings } = useContext(UserSettingsContext);

  return (
    
      Notifications: {settings?.notificationsEnabled ? 'Enabled' : 'Disabled'}
      Theme: {settings?.theme}
    
  );
}

function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

Bây giờ, các thay đổi đối với hồ sơ người dùng sẽ chỉ render lại các component sử dụng UserProfileContext, và các thay đổi đối với cài đặt người dùng sẽ chỉ render lại các component sử dụng UserSettingsContext.

2. Ghi nhớ (Memoization) với React.memo

Bao bọc các component sử dụng context bằng React.memo. React.memo là một higher-order component giúp ghi nhớ một functional component. Nó ngăn việc render lại nếu props của component không thay đổi. Khi kết hợp với việc tách context, điều này có thể giảm đáng kể số lần render lại không cần thiết.

Ví dụ:


import React, { useContext } from 'react';

const MyContext = React.createContext(null);

const MyComponent = React.memo(function MyComponent() {
  const { value } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Value: {value}
    
  );
});

export default MyComponent;

Trong ví dụ này, MyComponent sẽ chỉ render lại khi value trong MyContext thay đổi.

3. useMemo và useCallback

Sử dụng useMemo và useCallback để ghi nhớ các giá trị và hàm được truyền làm giá trị context. Điều này đảm bảo rằng giá trị context chỉ thay đổi khi các dependency cơ bản thay đổi, ngăn chặn việc render lại không cần thiết của các component sử dụng nó.

Ví dụ:


import React, { createContext, useState, useMemo, useCallback, useContext } from 'react';

const MyContext = createContext(null);

function MyProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const contextValue = useMemo(() => ({
    count,
    increment,
  }), [count, increment]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const { count, increment } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

Trong ví dụ này:

useCallback ghi nhớ hàm increment, đảm bảo rằng nó chỉ thay đổi khi các dependency của nó thay đổi (trong trường hợp này, nó không có dependency, vì vậy nó được ghi nhớ vô thời hạn).
useMemo ghi nhớ giá trị context, đảm bảo rằng nó chỉ thay đổi khi count hoặc hàm increment thay đổi.

4. Sử dụng Selectors

Triển khai các selectors để chỉ trích xuất dữ liệu cần thiết từ giá trị context trong các component sử dụng nó. Điều này làm giảm khả năng render lại không cần thiết bằng cách đảm bảo rằng các component chỉ render lại khi dữ liệu cụ thể mà chúng phụ thuộc vào thay đổi.

Ví dụ:


import React, { createContext, useContext } from 'react';

const MyContext = createContext(null);

const selectCount = (contextValue) => contextValue.count;

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = selectCount(contextValue);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

export default MyComponent;

Mặc dù ví dụ này được đơn giản hóa, trong các tình huống thực tế, các selectors có thể phức tạp và hiệu quả hơn, đặc biệt khi xử lý các giá trị context lớn.

5. Cấu trúc dữ liệu bất biến (Immutable)

Sử dụng các cấu trúc dữ liệu bất biến đảm bảo rằng các thay đổi đối với giá trị context sẽ tạo ra các đối tượng mới thay vì sửa đổi các đối tượng hiện có. Điều này giúp React dễ dàng phát hiện các thay đổi và tối ưu hóa việc render lại. Các thư viện như Immutable.js có thể hữu ích để quản lý các cấu trúc dữ liệu bất biến.

Ví dụ:


import React, { createContext, useState, useMemo, useContext } from 'react';
import { Map } from 'immutable';

const MyContext = createContext(Map());

function MyProvider({ children }) {
  const [data, setData] = useState(Map({
    count: 0,
    name: 'Initial Name',
  }));

  const increment = () => {
    setData(prevData => prevData.set('count', prevData.get('count') + 1));
  };

  const updateName = (newName) => {
    setData(prevData => prevData.set('name', newName));
  };

  const contextValue = useMemo(() => ({
    data,
    increment,
    updateName,
  }), [data]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = contextValue.get('count');

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

Ví dụ này sử dụng Immutable.js để quản lý dữ liệu context, đảm bảo rằng mỗi lần cập nhật sẽ tạo ra một Map bất biến mới, giúp React tối ưu hóa việc render lại hiệu quả hơn.

Ví dụ và Trường hợp sử dụng trong thực tế

Context API và useContext được sử dụng rộng rãi trong nhiều tình huống thực tế khác nhau:

Quản lý Theme: Như đã trình bày trong ví dụ trước, quản lý các theme (chế độ sáng/tối) trên toàn bộ ứng dụng.
Xác thực: Cung cấp trạng thái xác thực người dùng và dữ liệu người dùng cho các component cần đến nó. Ví dụ, một context xác thực toàn cục có thể quản lý việc đăng nhập, đăng xuất và dữ liệu hồ sơ người dùng, giúp nó có thể truy cập được trên toàn bộ ứng dụng mà không cần truyền props.
Cài đặt Ngôn ngữ/Khu vực: Chia sẻ cài đặt ngôn ngữ hoặc khu vực hiện tại trên toàn bộ ứng dụng để quốc tế hóa (i18n) và địa phương hóa (l10n). Điều này cho phép các component hiển thị nội dung bằng ngôn ngữ ưa thích của người dùng.
Cấu hình Toàn cục: Chia sẻ các cài đặt cấu hình toàn cục, chẳng hạn như các điểm cuối API hoặc các cờ tính năng (feature flags). Điều này có thể được sử dụng để điều chỉnh động hành vi của ứng dụng dựa trên cài đặt cấu hình.
Giỏ hàng: Quản lý trạng thái giỏ hàng và cung cấp quyền truy cập vào các mặt hàng và hoạt động của giỏ hàng cho các component trong một ứng dụng thương mại điện tử.

Ví dụ: Quốc tế hóa (i18n)

Hãy minh họa một ví dụ đơn giản về việc sử dụng Context API để quốc tế hóa:


import React, { createContext, useState, useContext, useMemo } from 'react';

const LanguageContext = createContext({
  locale: 'en',
  messages: {},
});

const translations = {
  en: {
    greeting: 'Hello',
    description: 'Welcome to our website!',
  },
  fr: {
    greeting: 'Bonjour',
    description: 'Bienvenue sur notre site web !',
  },
  es: {
    greeting: 'Hola',
    description: '¡Bienvenido a nuestro sitio web!',
  },
};

function LanguageProvider({ children }) {
  const [locale, setLocale] = useState('en');

  const setLanguage = (newLocale) => {
    setLocale(newLocale);
  };

  const messages = useMemo(() => translations[locale] || translations['en'], [locale]);

  const contextValue = useMemo(() => ({
    locale,
    messages,
    setLanguage,
  }), [locale, messages]);

  return (
    
      {children}
    
  );
}

function Greeting() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.greeting}
  );
}

function Description() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.description}
  );
}

function LanguageSwitcher() {
  const { setLanguage } = useContext(LanguageContext);

  return (
    
      
      
      
    
  );
}

function App() {
  return (
    
      
      
      
    
  );
}

export default App;

Trong ví dụ này:

LanguageContext cung cấp locale và các thông điệp hiện tại.
LanguageProvider quản lý trạng thái locale và cung cấp giá trị context.
Các component Greeting và Description sử dụng context để hiển thị văn bản đã dịch.
Component LanguageSwitcher cho phép người dùng thay đổi ngôn ngữ.

Các giải pháp thay thế cho useContext

Mặc dù useContext là một công cụ mạnh mẽ, nó không phải lúc nào cũng là giải pháp tốt nhất cho mọi kịch bản quản lý trạng thái. Dưới đây là một số giải pháp thay thế cần xem xét:

Redux: Một bộ chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript. Redux là một lựa chọn phổ biến để quản lý trạng thái ứng dụng phức tạp, đặc biệt là trong các ứng dụng lớn hơn.
MobX: Một giải pháp quản lý trạng thái đơn giản, có thể mở rộng. MobX sử dụng dữ liệu có thể quan sát (observable) và tính phản ứng tự động để quản lý trạng thái.
Recoil: Một thư viện quản lý trạng thái cho React sử dụng các atoms và selectors để quản lý trạng thái. Recoil được thiết kế để chi tiết và hiệu quả hơn Redux hoặc MobX.
Zustand: Một giải pháp quản lý trạng thái nhỏ, nhanh và có khả năng mở rộng, sử dụng các nguyên tắc flux được đơn giản hóa.
Jotai: Quản lý trạng thái nguyên thủy và linh hoạt cho React với mô hình atomic.
Prop Drilling: Trong các trường hợp đơn giản hơn khi cây component nông, prop drilling có thể là một lựa chọn khả thi. Điều này liên quan đến việc truyền props xuống qua nhiều cấp của cây component.

Việc lựa chọn giải pháp quản lý trạng thái phụ thuộc vào nhu cầu cụ thể của ứng dụng của bạn. Hãy xem xét sự phức tạp của ứng dụng, quy mô của nhóm phát triển và các yêu cầu về hiệu suất khi đưa ra quyết định.

Kết luận

Hook useContext của React cung cấp một cách tiện lợi và hiệu quả để chia sẻ dữ liệu giữa các component. Bằng cách hiểu rõ các cạm bẫy tiềm ẩn về hiệu suất và áp dụng các kỹ thuật tối ưu hóa được nêu trong hướng dẫn này, bạn có thể tận dụng sức mạnh của useContext để xây dựng các ứng dụng React có khả năng mở rộng và hiệu suất cao. Hãy nhớ tách các context khi thích hợp, ghi nhớ các component bằng React.memo, sử dụng useMemo và useCallback cho các giá trị context, triển khai các selectors và xem xét việc sử dụng các cấu trúc dữ liệu bất biến để giảm thiểu việc render lại không cần thiết và tối ưu hóa hiệu suất ứng dụng của bạn.

Luôn phân tích hiệu suất ứng dụng của bạn để xác định và giải quyết bất kỳ vấn đề nào liên quan đến việc sử dụng context. Bằng cách tuân theo các phương pháp tốt nhất này, bạn có thể đảm bảo rằng việc sử dụng useContext của mình góp phần tạo ra một trải nghiệm người dùng mượt mà và hiệu quả.