4 Lỗi Thường Gặp Khi Sử Dụng useState Trong React

Chào các bạn! Hôm nay mình sẽ chia sẻ với các bạn 4 lỗi phổ biến mà các dev React hay mắc phải khi sử dụng hook useState. Đây là những kinh nghiệm xương máu mà mình đúc kết được sau nhiều năm "cày cuốc" với React. Hy vọng bài viết này sẽ giúp các bạn tránh được những "cạm bẫy" khi làm việc với useState nhé!

1. Quên Xem Xét Trạng Thái Trước Đó 😨

Lỗi này xảy ra khi chúng ta cập nhật state mà không quan tâm đến giá trị hiện tại của nó. Điều này có thể dẫn đến những hành vi không mong muốn, đặc biệt là khi bạn thực hiện nhiều lần cập nhật state liên tiếp.

Ví dụ, giả sử bạn đang làm một bộ đếm đơn giản:

import React, { useState } from 'react';

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1); // Cách này có thể gây lỗi
  };

  return (
    <div>
      <p>Số lần click: {counter}</p>
      <button onClick={incrementCounter}>Tăng</button>
    </div>
  );
};

Thoạt nhìn thì đoạn code trên có vẻ không có vấn đề gì. Nhưng nếu bạn click nút "Tăng" nhiều lần liên tiếp, có thể counter sẽ không tăng đúng số lần bạn click đâu.

Để khắc phục, chúng ta nên sử dụng callback function trong setCounter:

const incrementCounter = () => {
  setCounter(prevCounter => prevCounter + 1);
};

Bằng cách này, React đảm bảo rằng chúng ta luôn cập nhật dựa trên giá trị mới nhất của counter.

2. Cập Nhật Object State Không Đúng Cách 🤦‍♂️

Khi làm việc với object state, nhiều dev có thói quen mutate trực tiếp object đó. Đây là một lỗi nghiêm trọng vì nó vi phạm nguyên tắc immutability của React.

Ví dụ sai:

const [profile, setProfile] = useState({ name: 'Nguyễn Văn A', age: 25 });

// ĐỪNG LÀM THẾ NÀY!
const updateAge = () => {
  profile.age = 26;
  setProfile(profile);
};

Cách làm đúng là tạo một object mới với spread operator:

const updateAge = () => {
  setProfile(prevProfile => ({ ...prevProfile, age: 26 }));
};

3. Lạm Dụng useState 🚫

Nhiều dev có xu hướng tạo quá nhiều state, ngay cả khi không cần thiết. Điều này làm cho component trở nên phức tạp và khó quản lý.

Ví dụ, thay vì:

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');

Chúng ta có thể gom nhóm các state liên quan:

const [userInfo, setUserInfo] = useState({
  firstName: '',
  lastName: '',
  email: '',
  phone: ''
});

4. Quên Clean Up Effect 🧹

Mặc dù đây không phải lỗi trực tiếp của useState, nhưng nó thường xảy ra khi sử dụng useState kết hợp với useEffect.

useEffect(() => {
  const timer = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  // Quên clean up!
}, [count]);

Cách khắc phục:

useEffect(() => {
  const timer = setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);
  
  return () => clearInterval(timer); // Clean up
}, []);

Kết Luận

Trên đây là 4 lỗi phổ biến mà mình thường thấy các dev mắc phải khi sử dụng useState. Hy vọng qua bài viết này, các bạn sẽ tránh được những "ổ gà" này trong quá trình làm việc với React nhé!

Chúc các bạn code vui vẻ và đừng quên chia sẻ bài viết này nếu thấy nó hữu ích nhé! Happy coding! 🚀👨‍💻