React Context API: Quản Lý State Toàn Cục Hiệu Quả

Trong các ứng dụng React, việc quản lý state toàn cục thường gặp nhiều thách thức khi dữ liệu cần được chia sẻ giữa nhiều component. React Context API ra đời như một giải pháp hiệu quả, giúp bạn tránh được tình trạng "props drilling" và làm cho code trở nên sạch sẽ, dễ bảo trì hơn.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu:

1. Context API là gì?
2. Tại sao nên sử dụng Context API?
3. Cách hoạt động của Context API
4. Ví dụ thực tế với Context API
5. So sánh Context API với Redux
6. Khi nào nên sử dụng Context API?

1. Context API là gì?

Context API là một tính năng được tích hợp sẵn trong React (từ React 16.3) để quản lý state toàn cục. Nó cho phép truyền dữ liệu giữa các component mà không cần phải truyền qua nhiều cấp props.

• Chia sẻ state toàn cục giữa nhiều component.
• Tránh props drilling (truyền props qua nhiều tầng).
• Dễ dàng sử dụng và triển khai.

2. Tại sao nên sử dụng Context API?

Vấn đề với props drilling

Khi bạn muốn truyền dữ liệu từ một component cha đến một component con nằm sâu bên trong, bạn sẽ phải truyền props qua từng cấp component, kể cả những component không cần sử dụng dữ liệu đó.

function App() {		
	  return <Parent data="Some Data" />;		
}		
			
function Parent({ data }) {		
	  return <Child data={data} />;		
}		
			
function Child({ data }) {		
	  return <GrandChild data={data} />;		
}		
			
function GrandChild({ data }) {		
	  return <p>{data}</p>;		
}		

Giải pháp: Sử dụng Context API để truyền trực tiếp dữ liệu đến component con mà không cần đi qua tất cả các cấp trung gian.

3. Cách hoạt động của Context API

Context API hoạt động qua 3 bước chính:

1. Tạo Context: Dùng React.createContext() để tạo Context.
2. Cung cấp Context (Provider): Sử dụng Context.Provider để cung cấp dữ liệu cho các component con.
3. Sử dụng Context (Consumer): Dùng hook useContext() để truy cập dữ liệu từ Context.

4. Ví dụ Thực Tế với Context API

Bước 1: Tạo Context

Tạo một file ThemeContext.js:

// ThemeContext.js		
import React, { createContext, useState } from "react";		
			
export const ThemeContext = createContext();		
			
export function ThemeProvider({ children }) {		
	  const [theme, setTheme] = useState("light");		
			
	  const toggleTheme = () => {		
	    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));		
	  };		
			
	  return (		
	    <ThemeContext.Provider value={{ theme, toggleTheme }}>		
	      {children}		
	    </ThemeContext.Provider>		
	  );		
}		

Bước 2: Sử dụng Provider trong App

// App.js		
import React from "react";		
import { ThemeProvider } from "./ThemeContext";		
import ThemeSwitcher from "./ThemeSwitcher";		
			
function App() {		
	  return (		
	    <ThemeProvider>		
	      <ThemeSwitcher />		
	    </ThemeProvider>		
	  );		
}		
			
export default App;		

Bước 3: Sử dụng Context trong Component

// ThemeSwitcher.js		
import React, { useContext } from "react";		
import { ThemeContext } from "./ThemeContext";		
			
function ThemeSwitcher() {		
	  const { theme, toggleTheme } = useContext(ThemeContext);		
			
	  return (		
	    <div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff", padding: "20px" }}>		
	      <p>Current Theme: {theme}</p>		
	      <button onClick={toggleTheme}>Toggle Theme</button>		
	    </div>		
	  );		
}		
			
export default ThemeSwitcher;		

Kết Quả

• Dữ liệu theme và hàm toggleTheme được chia sẻ giữa các component thông qua Context API.
• Không cần truyền props qua nhiều cấp.

5. So sánh Context API và Redux

6. Khi nào nên sử dụng Context API?

Nên sử dụng Context API khi:

• Dữ liệu cần được chia sẻ giữa nhiều component.
• Tránh tình trạng props drilling.
• Ứng dụng có quy mô nhỏ đến trung bình.

Không nên sử dụng Context API khi:

• State quá lớn và phức tạp.
• Cần quản lý nhiều tác vụ (side effects, middleware).

7. Tóm tắt kiến thức

8. Kết luận

React Context API là một công cụ mạnh mẽ và linh hoạt để quản lý state toàn cục trong ứng dụng React. Với Context API, bạn có thể:

• Chia sẻ dữ liệu giữa các component một cách dễ dàng.
• Tránh props drilling.
• Tạo code dễ đọc và bảo trì hơn.