Tìm hiểu về Hooks trong React

MayFest2024

Hooks là công cụ tuyệt vời cho phép các thành phần hàm (function components) truy cập trạng thái (state) và các tính năng khác trong React một cách dễ dàng, làm giảm sự phụ thuộc vào các thành phần lớp (class components). Trong bài viết này ta sẽ cùng nhau đi tìm hiểu React Hook và một số Hook cơ bản thường được sử dụng trong phát triển ứng dụng Web.

Hooks là gì?

Hook trong React là một khái niệm cho phép chúng ta "kết nối" vào các tính năng của React như state và lifecycle features.

State là một phần quan trọng của mỗi component. State đại diện cho dữ liệu mà component cần để render và có thể thay đổi. Khi state của một component thay đổi, React tự động render lại component đó cùng với tất cả các component con liên quan. Điều này cho phép bạn lưu trữ và quản lý thông tin như dữ liệu người dùng nhập và bất kỳ thông tin nào mà component cần để hoạt động một cách hiệu quả. State giúp cho ứng dụng có thể phản ứng linh hoạt theo thời gian và cung cấp trải nghiệm người dùng tốt hơn.
Lifecycle Features trong React đề cập đến các phương thức mà bạn có thể gọi để thực hiện các hành động tại các điểm khác nhau trong quá trình "vòng đời" của một component. Lifecycle Features cho phép bạn thực hiện các tác vụ như khởi tạo dữ liệu, tương tác với DOM, hoặc dọn dẹp sau khi component không cần thiết nữa.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

Có ba quy tắc cơ bản cho việc sử dụng Hook:

Hook chỉ có thể được gọi bên trong các thành phần hàm của React.
Hook chỉ có thể được gọi ở cấp độ cao nhất của một thành phần.
Hook không thể được sử dụng bên trong điều kiện.

React Hook mang lại các lợi ích chính như:

Simplified Code: Hook giúp viết mã ngắn gọn và dễ hiểu hơn bằng cách loại bỏ sự phức tạp của lớp (class components).
Logic Reusability: Tái sử dụng logic một cách dễ dàng thông qua việc viết các custom Hook.
State and Effects Management: Hook cung cấp các API như useState và useEffect giúp quản lý trạng thái và hiệu ứng trong functional components một cách linh hoạt và hiệu quả.

Cài đặt Hook cho dự án

Nếu bạn chưa cài đặt React và Babel, bạn có thể cài đặt chúng qua npm bằng cách chạy lệnh sau: npm install react react-dom @babel/preset-react --save

Sau đó, tạo một dự án React mới

npx create-react-app my-app
cd my-app

Import Hook vào các components

// App.js
import React, { useState } from 'react';

Các Hook cơ bản

Một số hook phổ biến nhất bao gồm:

useState: Sử dụng state trong functional components.
useEffect: Cho phép thực hiện các tác vụ sau mỗi lần render, tương tự như lifecycle methods trong class components.
useContext: Cho phép truy cập vào context trong functional components.
useReducer: Cho phép quản lý state với logic phức tạp hơn.
useCallback và useMemo: Giúp tối ưu hóa performance của ứng dụng bằng cách tránh render lại không cần thiết.

Trong bài viết này, mình sẽ cùng nhau tìm hiểu về 2 Hook useState, useEffect thường xuyên được sử dụng trong các dự án sử dụng React.

useState

useState là một React Hook cho phép bạn thêm trạng thái vào các thành phần của mình. Khi sử dụng useState, bạn đang khai báo một biến trạng thái mới và React sẽ theo dõi giá trị của biến này. Khi giá trị thay đổi, React sẽ tự động render lại thành phần để hiển thị giá trị mới.

const [state, setState] = useState(initialState)

Trong ví dụ dưới đây, chúng ta có một thành phần MyCheckbox đơn giản. Chúng ta sử dụng useState để khai báo một biến trạng thái liked với giá trị khởi tạo là true.

import { useState } from 'react';

export default function MyCheckbox() {
  const [liked, setLiked] = useState(true);

  function handleChange(e) {
    setLiked(e.target.checked);
  }

  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={liked}
          onChange={handleChange}
        />
        I liked this
      </label>
      <p>You {liked ? 'liked' : 'did not like'} this.</p>
    </>
  );
}

Open in Codesandbox

Trong ví dụ này, chúng ta khai báo một biến trạng thái liked bằng cách sử dụng useState(true). Điều này đặt trạng thái mặc định của checkbox là "đã được chọn". Khi người dùng thay đổi trạng thái của checkbox, hàm handleChange được gọi. Trong hàm này, chúng ta sử dụng setLiked để cập nhật giá trị của biến trạng thái liked dựa trên trạng thái của checkbox. Nếu checkbox được chọn, liked sẽ là true; nếu không, liked sẽ là false.

Cuối cùng, React tự động render lại thành phần MyCheckBox và cập nhật giao diện người dùng dựa trên trạng thái mới của checkbox..

useEffect

useEffect là một công cụ mạnh mẽ để quản lý các hiệu ứng phụ (side effects) và đồng bộ hóa các thành phần của bạn với các hệ thống bên ngoài trong kiến trúc dựa trên các thành phần hàm. Nó cho phép bạn thực hiện các hiệu ứng phụ trong các thành phần của bạn, chẳng hạn như lấy dữ liệu từ một API, đăng ký các sự kiện, hoặc thay đổi DOM.

useEffect(setup, dependencies?)

Dependencies array: Bạn có thể chỉ định các dependencies trong đối số thứ hai của useEffect. Điều này cho biết cho React biết là chỉ chạy hiệu ứng khi những giá trị cụ thể đã thay đổi. Nếu mảng dependencies rỗng, hiệu ứng sẽ chỉ chạy một lần sau render ban đầu. Mã bên trong hook useEffect được chạy sau mỗi lần render của thành phần. Điều này bao gồm cả render ban đầu cũng như các lần render sau được kích hoạt bởi sự thay đổi của trạng thái hoặc prop.

Dưới đây là một ví dụ tiêu biểu về cách sử dụng useEffect để lấy dữ liệu từ một API khi thành phần được render lần đầu tiên và sau đó cập nhật giao diện người dùng dựa trên dữ liệu đó:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data); // Update state with fetched data
        setLoading(false); // Set loading state to false
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false); // Set loading state to false even if there's an error
      });
  }, []); // Empty dependency array means this effect runs only once after the initial render

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          <h1>Data from API:</h1>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default ExampleComponent;

Trong ví dụ này, chúng ta sử dụng useState để khai báo trạng thái cho dữ liệu và trạng thái tải (loading). Trong useEffect, chúng ta gọi API để lấy dữ liệu khi thành phần được render lần đầu tiên (với mảng dependency rỗng []). Khi dữ liệu được trả về từ API, chúng ta cập nhật trạng thái data và đặt trạng thái loading thành false. Trong giao diện người dùng, chúng ta kiểm tra trạng thái loading. Nếu đang tải, hiển thị thông báo "Loading...", nếu không, hiển thị dữ liệu từ API.

Lời kết

Trong bài viết này, chúng ta đã khám phá về React Hooks và cách chúng đã thay đổi cách chúng ta viết mã trong các ứng dụng React. Chúng ta đã tìm hiểu về hai Hook cơ bản là useState và useEffect.useState cho phép chúng ta khai báo và cập nhật trạng thái trong các thành phần hàm, trong khi useEffect giúp chúng ta quản lý các hiệu ứng phụ và đồng bộ hóa các thành phần với các hệ thống bên ngoài.

Với kiến thức về React Hooks, hy vọng bạn có thể tận dụng sức mạnh của chúng để phát triển các ứng dụng React tuyệt vời của mình!

Tài liệu tham khảo:

Web