Tại sao lại sử dụng useState thay vì chỉ sử dụng biến trong React

Tại sao sử dụng useState thay vì chỉ sử dụng biến trong React?

Bạn có bao giờ tự hỏi tại sao chúng ta sử dụng useState thay vì chỉ sử dụng biến trong React không? Hãy cùng khám phá khái niệm này với một ví dụ đơn giản.

Một ví dụ đơn giản về bộ đếm

Hãy tưởng tượng chúng ta có một bộ đếm cơ bản với hai nút: Một để tăng số đếm và một để giảm số đếm. Nếu chúng ta tạo bộ đếm này bằng useState, nó hoạt động hoàn hảo. Tuy nhiên, nếu chúng ta thử chỉ sử dụng một biến thông thường, nó không hoạt động như mong đợi.

import React, { useState } from 'react';

function Counter() {
  // Using useState to create a state variable
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

Vậy thì useState là gì?

useState là một hook trong React, cho phép bạn thêm trạng thái vào các thành phần chức năng. Trạng thái giống như bộ nhớ mà thành phần sử dụng để ghi nhớ mọi thứ và cập nhật chúng theo thời gian.

Tại sao các biến không hoạt động?

Lý do sử dụng biến lại không hiệu quả, đó là bởi React không theo dõi các thay đổi trong biến thông thường như với trạng thái được quản lý bởi useState. Khi bạn nhấp vào nút tăng hoặc giảm, useState sẽ cho React biết rằng trạng thái đã thay đổi. Sau đó, React sẽ render lại thành phần và cập nhật số lượng.

Tuy nhiên, với biến thông thường, React không nhận biết được những thay đổi nên không cập nhật số lượng. Do đó mà dẫn đến sự sai lệch, không hoạt động như mong muốn.

import React from 'react';

function Counter() {
  // Using a regular variable
  let count = 0;

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

Kết luận

Tôi hy vọng bây giờ bạn đã hiểu lý do tại sao useState quản lý các State trong React lại vô cùng quan trọng. Nó cho phép React theo dõi các thay đổi và cập nhật thành phần cho phù hợp. Cảm ơn các bạn đã dành thời gian theo dõi bài viết này!