Tại sao nên sử dụng useState trong React thay vì biến thông thường?

Bạn có bao giờ tự hỏi tại sao chúng ta nên sử dụng hook useState trong React thay vì chỉ sử dụng một biến thông thường không? Bài viết này sẽ giúp bạn khám phá khái niệm này thông qua một ví dụ đơn giản.

Ví dụ về bộ đếm cơ bản trong React

Hãy tưởng tượng bạn muốn xây dựng một bộ đếm với hai nút: một nút để tăng số đếm và một nút để giảm số đếm. Để thực hiện điều này, nếu bạn sử dụng useState, mọi thứ sẽ hoạt động trơn tru. Ngược lại, nếu bạn chỉ sử dụng biến thông thường, bộ đếm sẽ không hoạt động như mong muốn.

Sử dụng useState

import React, { useState } from 'react';

function Counter() {
  // Khởi tạo biến trạng thái với useState
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tăng</button>
      <button onClick={() => setCount(count - 1)}>Giảm</button>
    </div>
  );
}

export default Counter;

Giải thích về useState

useState là một hook được cung cấp bởi React, cho phép bạn thêm và quản lý trạng thái trong các thành phần chức năng. Trạng thái này giống như một bộ nhớ, giúp thành phần ghi nhớ các giá trị và cập nhật chúng khi cần thiết.

Tại sao biến thông thường không hiệu quả?

Khi bạn sử dụng biến thông thường để quản lý trạng thái, React sẽ không theo dõi sự thay đổi của biến đó. Điều này có nghĩa là khi bạn nhấp vào nút để tăng hoặc giảm số đếm, React sẽ không nhận diện được thay đổi nếu nó không được thông báo bằng hook useState. Do đó, giao diện người dùng sẽ không được cập nhật, dẫn đến kết quả không như mong đợi.

Ví dụ với biến thông thường

import React from 'react';

function Counter() {
  // Sử dụng biến thông thường để lưu trữ giá trị đếm
  let count = 0;

  const increase = () => {
    count += 1;
  };

  const decrease = () => {
    count -= 1;
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>Tăng</button>
      <button onClick={decrease}>Giảm</button>
    </div>
  );
}

export default Counter;

Như bạn có thể thấy, với biến thông thường, khi bạn nhấn nút tăng hoặc giảm, số đếm sẽ không thay đổi trên giao diện vì React không nhận diện được sự thay đổi trong biến đó.

Kết luận

Qua bài viết này, hy vọng bạn đã hiểu rõ lý do vì sao useState là một phần quan trọng trong việc quản lý trạng thái trong React. useState giúp React theo dõi các thay đổi trạng thái và cập nhật giao diện một cách chính xác. Cảm ơn bạn đã đọc bài viết! Những kiến thức này sẽ rất hữu ích cho bạn trong quá trình phát triển ứng dụng với React.
source: viblo