4 Sai Lầm Thường Gặp Khi Sử Dụng Hook useState Trong React và Cách Khắc Phục

Khi bạn làm việc với hook useState trong React, có thể bạn sẽ mắc phải một số lỗi phổ biến có thể ảnh hưởng nghiêm trọng đến hiệu suất của ứng dụng. Thông qua bài viết này, chúng tôi sẽ chỉ ra 4 lỗi thường gặp cùng với các cách khắc phục hiệu quả, nhằm giúp ứng dụng của bạn hoạt động mượt mà hơn.

1. Sử Dụng Hàm Để Khởi Tạo useState Không Chính Xác

Một trong những sai lầm phổ biến khi sử dụng useState là gọi một hàm phức tạp để khởi tạo state. Nếu bạn làm như vậy, hàm đó sẽ được thực thi ở mỗi lần render, điều này có thể làm giảm hiệu suất của ứng dụng. Thay vào đó, bạn nên sử dụng một hàm bên trong useState để đảm bảo rằng hàm chỉ được gọi một lần duy nhất khi render ban đầu.

Ví dụ sai:

const [data, setData] = useState(expensiveFunction());

Trong trường hợp này, expensiveFunction sẽ được gọi trên mỗi lần kết xuất, gây tốn tài nguyên.

Ví dụ đúng:

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

Sử dụng hàm bên trong giúp tiết kiệm tài nguyên trong các lần render tiếp theo.

2. Sử Dụng Khác Hàm setState Không Đúng Cách

Nhiều lập trình viên thường gặp sai lầm khi cập nhật state mà không sử dụng hàm dạng bên trong setState. Điều này có thể gây ra vấn đề nếu có nhiều lượt cập nhật diễn ra liên tiếp, khiến cho giá trị không phản ánh đúng trạng thái mới nhất.

Ví dụ sai:

setCount(count + 1);

Điều này có thể dẫn đến lỗi khi giá trị count không phải là giá trị cập nhật mới nhất.

Ví dụ đúng:

setCount(prevCount => prevCount + 1);

Phương pháp này đảm bảo rằng mỗi lần cập nhật đều dựa trên giá trị trước đó, giúp củng cố tính đáng tin cậy của state.

3. Đặt Hook useState Ở Vị Trí Không Chính Xác

Một lỗi phổ biến khác là đặt hook không đúng vị trí trong mã. Việc đặt useState bên trong các vòng lặp hoặc câu lệnh điều kiện có thể phá vỡ quy tắc quản lý state của React.

Ví dụ sai:

if (condition) {
  const [value, setValue] = useState(false);
}

Điều này vi phạm quy tắc của React vì useState không nên được gọi bên trong các điều kiện.

Ví dụ đúng:

const [value, setValue] = useState(false);
if (condition) {
  // Sử dụng state ở đây
}

Bằng cách này, React có thể quản lý đúng thứ tự hook được gọi.

4. Đột Biến Trạng Thái Trực Tiếp

Trong React, việc xem state là bất biến là rất quan trọng. Nếu bạn thay đổi trực tiếp một đối tượng hoặc mảng trong state, điều này có thể dẫn đến sự cố không mong muốn vì React không nhận ra sự thay đổi.

Ví dụ sai:

const [user, setUser] = useState({ name: 'John', age: 35 });
user.name = 'Jane';  // Thay đổi không chính xác
setUser(user);      // Cập nhật không chính xác

Việc thay đổi trực tiếp user sẽ không kích hoạt việc render lại.

Ví dụ đúng:

setUser(prevUser => ({
  ...prevUser,
  name: 'Jane'
}));

Tại đây, một đối tượng mới được tạo ra thông qua toán tử spread, giúp duy trì tính bất biến của state và đảm bảo việc render lại chính xác.

Kết Luận

Trong bài viết này, chúng tôi đã chỉ ra 4 lỗi thường gặp khi sử dụng hook useState trong React và cách khắc phục những lỗi này. Hy vọng rằng, với những lưu ý và khuyến nghị này, các bạn có thể cải thiện hiệu suất và hiệu quả của ứng dụng React của mình. Cảm ơn các bạn đã theo dõi!
source: viblo