Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về useContext, một Hook trong ReactJS, giúp chúng ta làm việc với Context API một cách dễ dàng hơn.

Giới thiệu về Context API

Trước khi tìm hiểu về useContext, chúng ta cần hiểu về Context API. Context API là một cách giúp chúng ta chia sẻ dữ liệu giữa các component mà không cần phải truyền props từ component cha xuống con.

import React, { createContext } from 'react';

// Tạo một Context object
const MyContext = createContext(defaultValue);

useContext Hook

useContext là một Hook giúp chúng ta có thể sử dụng Context mà không cần phải sử dụng Consumer. Điều này giúp code của chúng ta trở nên gọn gàng hơn.

import React, { useContext } from 'react';

// Sử dụng useContext
const value = useContext(MyContext);

Ví dụ về useContext

Dưới đây là một ví dụ về cách sử dụng useContext:

import React, { useContext } from 'react';
const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

Trong ví dụ trên, chúng ta tạo một ThemeContext với giá trị mặc định là themes.light. Sau đó, chúng ta sử dụng ThemeContext.Provider để cung cấp themes.dark cho các component con. Cuối cùng, chúng ta sử dụng useContext để lấy giá trị của ThemeContext trong ThemedButton component.

Ví dụ về sử dụng state trong Context và useContext

Giả sử chúng ta có một ứng dụng đơn giản với một button để tăng giá trị count.

Bước 1: Tạo Context

Đầu tiên, chúng ta cần tạo một Context.

import React from 'react';

const CountContext = React.createContext();

Bước 2: Tạo Provider

Tiếp theo, chúng ta cần tạo một Provider để cung cấp state cho các component con.

import React, { useState } from 'react';

const CountContext = React.createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

export default CountContext;

Bước 3: Sử dụng useContext để truy cập state

Cuối cùng, chúng ta có thể sử dụng useContext để truy cập state từ bất kỳ component con nào.

import React, { useContext } from 'react';
import CountContext from './CountContext';

function Counter() {
  const { count, setCount } = useContext(CountContext);

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

export default Counter;

Trong ví dụ trên, chúng ta đã tạo một Context với state là count. Chúng ta sau đó sử dụng useContext để truy cập và cập nhật state này từ một component con.