Hướng dẫn React hooks: UseState và UseEffect

Mục lục

• Giới thiệu về React Hooks
• Hướng dẫn sử dụng useState
• Hướng dẫn sử dụng useEffect
• Lưu ý khi sử dụng
• Câu hỏi thường gặp

Giới thiệu về React Hooks

React Hooks là một tính năng mới được giới thiệu trong phiên bản React 16.8, cho phép bạn sử dụng state và các tính năng khác của React mà không cần viết class. Hai hooks phổ biến nhất là useState và useEffect, giúp bạn tối ưu hóa việc quản lý trạng thái và hiệu ứng trong component.

Lợi ích của việc sử dụng React hooks:

• Giảm độ phức tạp của code.
• Tăng khả năng tái sử dụng mã nguồn.
• Cải thiện hiệu suất ứng dụng.

Hướng dẫn sử dụng useState

useState là một hook cho phép bạn tạo và quản lý trạng thái trong component function. Dưới đây là cách sử dụng:

Điều kiện tiên quyết

• Đảm bảo bạn đang sử dụng React 16.8 trở lên.
• Thêm import React, { useState } from 'react'; vào file component của bạn.

Các bước thực hiện

1. Khởi tạo state với useState:

const [count, setCount] = useState(0); // count là biến state, setCount là hàm cập nhật

2. Sử dụng state trong component:

<button onClick={() => setCount(count + 1)}>Tăng số đếm: {count}</button>

Ví dụ cụ thể

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Số đếm: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Tăng số đếm</button>
        </div>
    );
};

export default Counter;

Hướng dẫn sử dụng useEffect

useEffect là hook cho phép bạn thực hiện các tác vụ hiệu ứng bên ngoài như gọi API, thay đổi DOM hoặc đăng ký sự kiện. Dưới đây là cách sử dụng:

Điều kiện tiên quyết

• Đảm bảo bạn đang sử dụng React 16.8 trở lên.
• Thêm import React, { useEffect } from 'react'; vào file component của bạn.

Các bước thực hiện

1. Sử dụng useEffect để thực hiện tác vụ:

useEffect(() => {
        // Tác vụ cần thực hiện
    }, [dependencies]); // dependencies là mảng các giá trị phụ thuộc

2. Ví dụ thực hiện gọi API:

useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []); // Chạy một lần khi component mount

Ví dụ cụ thể

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

const DataFetcher = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        <div>
            <h1>Dữ liệu:</h1>
            <pre>{JSON.stringify(data)}</pre>
        </div>
    );
};

export default DataFetcher;

Lưu ý khi sử dụng

⚠️ Dưới đây là một số lưu ý khi sử dụng useState và useEffect:

• Tránh gọi setState trong vòng lặp hoặc trong useEffect mà không có điều kiện kiểm tra.
• Luôn chỉ định mảng phụ thuộc cho useEffect để tránh việc gọi không cần thiết.
• Không gọi hook bên ngoài component hoặc trong điều kiện, vì điều này có thể gây ra lỗi.

Câu hỏi thường gặp

1. Hook là gì trong React?

Hook là một hàm cho phép bạn “kết nối” với các tính năng của React như state và lifecycle mà không cần viết class.

2. Khi nào nên sử dụng useEffect?

Hãy sử dụng useEffect khi bạn cần thực hiện các tác vụ bên ngoài như gọi API, đăng ký sự kiện hoặc thao tác với DOM.

3. Có thể sử dụng useState nhiều lần trong một component không?

Có, bạn có thể gọi useState nhiều lần để quản lý nhiều trạng thái khác nhau trong cùng một component.