3.3. Quản lý state trong functional component

Tương tự như cách quản lý state với class component, từ phiên bản React 16.8 trở đi, đội ngũ phát triển đã giới thiệu khái niệm Hooks, giúp function component cũng có khả năng quản lý state.

1. Khái niệm Hooks:

• Hooks là một tính năng mới trong React (giới thiệu từ phiên bản 16.8) giúp bạn sử dụng state và các tính năng khác mà không cần phải sử dụng Class Component.

• Các hook phổ biến bao gồm useState, useEffect, useContext,...

1. Tại sao nên sử dụng Hooks:

• Dễ dàng quản lý state trong các component chức năng (Functional Component).

• Giảm sự phức tạp và rườm rà so với Class Component.

1. Khởi tạo state trong functional component

Với sự ra đời của hook useState, việc khởi tạo state trong functional component trở nên đơn giản và dễ dàng hơn.

Cú pháp:

import {useState} from 'react'
const [state, setState] = useState(initialState);

• initialState: Giá trị khởi tạo cho state. Đây có thể là số, chuỗi, mảng, đối tượng, v.v. Ví dụ: useState(0) khởi tạo state với giá trị 0.

• state: Biến lưu trữ giá trị hiện tại của state. Bạn sử dụng state để truy cập giá trị này trong component.

• setState: Hàm dùng để cập nhật giá trị của state. Khi gọi setState(newValue), giá trị của state sẽ được thay đổi, và component sẽ được render lại với giá trị mới.

1. Ví dụ

import { useState } from 'react';

function Counter2() {
    const [count, setCount] = useState(0);

    const handleClickMe = () => {
        setCount(count + 1);
    }

    return (
        <>
            <p>Counter 2</p>
            <p>Bạn đã click {count} lần</p>
            <button onClick={handleClickMe}>Click me !</button>
        </>
    )
}

export default Counter2;