JavaScript Essentials cho React

Khoảng 80% lỗi "lạ" trong React thực tế bắt nguồn từ việc chưa hiểu rõ cơ chế của JavaScript. Dưới đây là những trụ cột bạn phải nắm vững.

1. Cơ chế Tham chiếu (Reference) vs Giá trị (Value)

React so sánh sự thay đổi của State theo Tham chiếu (Shallow Comparison).

• Primitive types (string, number, boolean): So sánh giá trị.
• Reference types (Object, Array): So sánh địa chỉ vùng nhớ.

// ❌ SAI: React không thấy thay đổi vì tham chiếu không đổi
const [user, setUser] = useState({ name: 'John' });
user.name = 'Bob'; 
setUser(user); // React thấy địa chỉ vùng nhớ vẫn vậy -> Không re-render

// ✅ ĐÚNG: Luôn tạo ra bản sao mới (Spread operator)
setUser({ ...user, name: 'Bob' }); // Địa chỉ mới -> Re-render

2. Tính bất biến (Immutability)

Trong React, bạn không bao giờ được thay đổi dữ liệu gốc. Hãy luôn trả về kết quả mới.

• Array methods nên dùng: map, filter, reduce, find. (Trả về array mới).
• Array methods nên tránh: push, pop, splice, sort. (Làm thay đổi array gốc).

// Lọc phần tử
const activeUsers = users.filter(u => u.isActive);

// Cập nhật 1 phần tử trong mảng
const updatedItems = items.map(item => 
  item.id === targetId ? { ...item, status: 'DONE' } : item
);

3. Destructuring & Spread (Sạch hơn, ngắn hơn)

Sử dụng Destructuring giúp code component tường minh và sạch sẽ hơn nhiều.

// ❌ Cũ
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// ✅ Mới
function Welcome({ name, role = 'Guest' }) {
  return <h1>Hello, {name} ({role})</h1>;
}

4. Arrow Functions & Lexical 'this'

Trong React Functional Component, chúng ta dùng Arrow Function gần như hoàn toàn. Nó giúp tránh các vấn đề về this trong event handlers.

const handleClick = () => {
  setIsActive(!isActive);
};

return <button onClick={handleClick}>Toggle</button>;

5. Promises & Async/Await

Xử lý API là phần không thể thiếu. Hiểu rõ luồng bất tuần tự (Asynchronous) giúp bạn tránh các lỗi về race conditions.

const fetchData = async () => {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    return data;
  } catch (error) {
    console.error("Fetch tạch rồi:", error);
  }
};

6. Nullish Coalescing (??) & Optional Chaining (?.)

Cực kỳ quan trọng khi xử lý dữ lệu từ API có thể bị thiếu hoặc null.

// Tránh lỗi "Cannot read property 'name' of undefined"
return <div>{user?.profile?.name ?? 'Guest'}</div>;

Kết luận

Đừng dành quá nhiều thời gian học framework nếu bạn chưa vững JavaScript. Hãy luyện tập map, filter, spread operator và async/await hàng ngày. Đó là những "vũ khí" chính khi bạn làm việc với React.