4 Lỗi Phổ Biến Khi Sử Dụng useState Trong React và Cách Khắc Phục

Chào các bạn! Trong bài viết hôm nay, mình sẽ chia sẻ với các bạn 4 lỗi phổ biến mà các lập trình viên React thường mắc phải khi sử dụng hook useState. Đây là những kinh nghiệm quý báu mà mình đã tích lũy được sau nhiều năm làm việc với React. Hy vọng rằng bài viết này sẽ giúp các bạn tránh được những cạm bẫy thường gặp khi làm việc với useState.

1. Quên Xem Xét Trạng Thái Hiện Tại 😨

Lỗi thường gặp đầu tiên là khi chúng ta cập nhật state mà không chú ý đế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 như ý muốn, đặc biệt khi thực hiện nhiều lần cập nhật liên tiếp.

Ví dụ:

import React, { useState } from 'react'; 

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

  const incrementCounter = () => { 
    setCounter(counter + 1); // Có thể gây lỗi khi click nhiều lần
  }; 

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

Thoạt nhìn, đoạn mã trên không có vẻ gì sai. Tuy nhiên, nếu bạn nhấn nút "Tăng" nhiều lần liên tiếp, giá trị của counter có thể không tăng đúng như mong đợi.

Cách khắc phục: Để 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 sẽ đảm bảo cập nhật dựa trên giá trị mới nhất của counter.

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

Khi làm việc với object state, một số lập trình viên có thói quen trực tiếp sửa đổi object đó. Đây là một lỗi nghiêm trọng vì nó vi phạm nguyên tắc tính bất biến (immutability) của React.

Ví dụ sai:

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

const updateAge = () => { 
  profile.age = 26; 
  setProfile(profile); // Sửa đổi trực tiếp
};

Cách làm đúng: Nên tạo một object mới bằng cách sử dụng spread operator:

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

3. Lạm Dụng useState 🚫

Một số lập trình viên có xu hướng tạo quá nhiều state ngay cả khi không thực sự cần thiết. Điều này sẽ làm cho component trở nên phức tạp và khó quản lý.

Ví dụ không nên làm:

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

Cách tối ưu: Nên gom nhóm các state liên quan lại:

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

4. Quên Clean Up Effect 🧹

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

Ví dụ sai:

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 lập trình viên mắc phải khi sử dụng useState trong React. Hy vọng qua bài viết này, các bạn sẽ có thêm kiến thức để tránh những rắc rối trong quá trình lập trình. Chúc các bạn có những trải nghiệm thú vị với React và đừng quên chia sẻ bài viết này nếu thấy hữu ích nhé! Happy coding! 🚀👨‍💻
source: viblo