Bạn thích hooks nào trong React? Hãy mô tả cách tạo một hooks bất kỳ.

Trong React, Hooks là một tính năng được giới thiệu từ phiên bản 16.8, cho phép bạn sử dụng state và các tính năng React khác mà không cần phải viết một class. Hooks mang lại nhiều lợi ích như việc giúp code trở nên gọn gàng hơn, dễ đọc và dễ bảo trì hơn. Một trong những Hooks mà tôi thích nhất là useState vì nó cung cấp một cách đơn giản để thêm trạng thái local vào trong function components.

useState

useState là một Hook cơ bản cho phép bạn thêm trạng thái React vào trong function components. Khi bạn gọi useState trong một function component, React sẽ giữ giá trị này giữa các lần re-render của component.

Cách sử dụng

Để sử dụng useState, bạn chỉ cần nhập nó từ React và gọi nó trong function component của mình:

import React, { useState } from 'react';

function Counter() {
  // Khai báo một biến state mới, chúng ta gọi là "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Bạn đã click {count} lần</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Trong ví dụ trên, useState được gọi với giá trị khởi tạo là 0. Nó trả về một mảng với hai phần tử: giá trị hiện tại của trạng thái (count) và một hàm cho phép cập nhật giá trị đó (setCount). Khi bạn click vào nút, hàm setCount được gọi, dẫn đến việc component được re-render với giá trị mới ...