Giới thiệu

React là một trong những thư viện front-end phổ biến nhất trên thế giới, được sử dụng để phát triển ứng dụng tại nhiều công ty lớn như Meta, Netflix, Airbnb, và hàng triệu công ty khởi nghiệp khác. React nổi bật nhờ tính linh hoạt, tốc độ và giúp việc phát triển giao diện người dùng trở nên thú vị hơn.

Tuy nhiên, ngay cả những lập trình viên React dày dạn kinh nghiệm cũng dễ mắc phải một số cạm bẫy phổ biến. Những sai lầm này có thể không gây ra sự cố ngay lập tức nhưng có thể dẫn đến:

• Tắc nghẽn hiệu suất
• Lỗi không thể đoán trước
• Mã nguồn cồng kềnh
• Dự án khó bảo trì

Trong hướng dẫn này, chúng ta sẽ đi sâu vào 5 sai lầm phổ biến của lập trình viên React và tìm hiểu cách tránh xa những sai lầm này bằng những thực hành tốt nhất.

Mục lục

1. Sử dụng chỉ số làm Key trong danh sách
2. Sử dụng State quá mức
3. Quên dọn dẹp Side Effects
4. Trộn lẫn Logic và Giao diện
5. Bỏ qua Công cụ Hiệu suất
6. Sai lầm bổ sung: Bỏ qua tính khả dụng
7. Kết luận

1. Sử dụng chỉ số làm Key trong danh sách

Khi render danh sách trong React, bạn cần cung cấp một thuộc tính key. Nhiều lập trình viên thường chọn chỉ số của mảng:

{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}

Vấn đề:

React sử dụng key để quyết định xem nó nên tái sử dụng một phần tử hay tạo lại nó. Nếu bạn sử dụng chỉ số:

• Việc thêm/xóa phần tử sẽ làm trạng thái bị lỗi (checkbox, input bị reset).
• Hiệu ứng hoạt hình trông sẽ bị giật.
• Việc gỡ lỗi trở nên khó khăn.

Giải pháp: Sử dụng một định danh duy nhất

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Nếu dữ liệu của bạn không có ID, hãy tạo một ID bằng cách sử dụng uuid hoặc một gói tương tự.

Mẹo chuyên nghiệp: Chỉ sử dụng chỉ số làm key nếu danh sách là tĩnh và sẽ không bao giờ thay đổi (như render sao trong một thành phần đánh giá).

2. Sử dụng State quá mức

Rất dễ mắc phải cám dỗ khi đưa mọi thứ vào useState:

const [filteredData, setFilteredData] = useState(data.filter(d => d.active));

Vấn đề:

• Lưu trữ dữ liệu được tạo ra (những gì bạn có thể tính toán từ trạng thái hiện tại) dẫn đến việc tái render không cần thiết.
• Ứng dụng của bạn trở nên khó hiểu hơn vì trạng thái có thể không đồng bộ.

Giải pháp: Sử dụng useMemo cho dữ liệu được tạo ra

const filteredData = useMemo(
  () => data.filter(d => d.active),
  [data]
);

Bây giờ React chỉ tính toán lại khi data thay đổi.

Mẹo chuyên nghiệp: Giữ cho trạng thái của bạn càng tối thiểu càng tốt. Lưu trữ nguồn của sự thật, không phải mọi thứ được tạo ra từ nó.

3. Quên dọn dẹp Side Effects

Khi bạn sử dụng useEffect, React chạy mã của bạn sau mỗi lần render. Nhiều lập trình viên quên việc dọn dẹp:

useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);

Vấn đề:

• Các listener sự kiện chồng chéo lên nhau.
• Rò rỉ bộ nhớ xảy ra.
• Các tham chiếu cũ gây ra lỗi kỳ lạ.

Giải pháp: Luôn trả về một hàm dọn dẹp

useEffect(() => {
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

Mẹo chuyên nghiệp: Điều này áp dụng cho bất kỳ side effect nào (timeout, interval, subscriptions, sockets). Luôn tự hỏi:

• Tôi có cần xóa/gỡ bỏ đăng ký không?
• Điều này có gây rò rỉ bộ nhớ nếu thành phần bị hủy không?

4. Trộn lẫn Logic và Giao diện

Một sai lầm phổ biến của người mới là lấy dữ liệu trực tiếp trong một thành phần:

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user/1")
      .then(res => res.json())
      .then(setUser);
  }, []);

  return <div>{user?.name}</div>;
}

Vấn đề:

• Logic nghiệp vụ bị trộn lẫn với giao diện.
• Khó kiểm tra.
• Không thể tái sử dụng.

Giải pháp: Tách Logic thành các Custom Hooks

function useUser(id) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/user/${id}`)
      .then(res => res.json())
      .then(setUser);
  }, [id]);

  return user;
}

function UserProfile() {
  const user = useUser(1);
  return <div>{user?.name}</div>;
}

Mẹo chuyên nghiệp: Nếu bạn nhận thấy useEffect + logic trạng thái lặp lại giữa các thành phần, đó là dấu hiệu để tạo một custom hook.

5. Bỏ qua Công cụ Hiệu suất

React rất nhanh, nhưng mã không cẩn thận có thể làm chậm nó:

• Các thành phần tái render quá thường xuyên.
• Các phép tính tốn kém chạy trên mỗi lần render.
• Danh sách lớn làm đông UI.

Vấn đề phổ biến:

• Truyền các hàm inline mới làm props (onClick={() => ...})
• Render hơn 1000 mục mà không có virtualization
• Không memo hóa các phép tính nặng

Giải pháp:

1. Memo hóa các hàm với useCallback

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

2. Memo hóa các phép tính tốn kém với useMemo

const sortedList = useMemo(() => {
  return bigList.sort();
}, [bigList]);

3. Ngăn chặn tái render không cần thiết với React.memo

const Child = React.memo(({ value }) => <div>{value}</div>);

4. Phân tích trước khi tối ưu hóa Sử dụng React DevTools Profiler để xem các thành phần nào tái render không cần thiết.

Mẹo chuyên nghiệp: Đừng tối ưu hóa mù quáng. Luôn đo lường trước!

Sai lầm bổ sung: Bỏ qua tính khả dụng

Các hiệu ứng hoạt hình và giao diện đẹp không có ý nghĩa nếu ứng dụng của bạn không thể sử dụng cho mọi người.

• Sử dụng HTML ngữ nghĩa (<button> thay vì <div onClick>).
• Thêm các thuộc tính aria-* cho các trình đọc màn hình.
• Đảm bảo điều hướng bằng bàn phím hoạt động.

Tính khả dụng không phải là một suy nghĩ sau; đó là một phần của phát triển React tốt.

Kết luận

Sai lầm là một phần của quá trình học tập. Nhưng nếu bạn tránh những cạm bẫy này:

• Sử dụng key đúng cách
• Giữ trạng thái tối thiểu
• Dọn dẹp side effects
• Tách logic bằng hooks
• Tối ưu hóa một cách thông minh

…các ứng dụng React của bạn sẽ nhanh hơn, sạch hơn và dễ bảo trì hơn.

Thách thức của tôi dành cho bạn: Hãy quay lại một trong những dự án React cũ của bạn và kiểm tra xem bạn có mắc phải những sai lầm này không. Việc khắc phục chúng sẽ ngay lập tức cải thiện mã nguồn của bạn.

Sai lầm lớn nhất mà bạn đã làm trong React là gì, và bạn đã học được gì từ nó? Hãy để lại ý kiến của bạn trong phần bình luận—tôi rất muốn nghe câu chuyện của bạn!