Màn hình đang giữ `loading`, `error`, `data` bằng ba `useState` riêng và thỉnh thoảng rơi vào trạng thái vô lý (vừa loading vừa có error). Bạn xử lý thế nào?

Vấn đề là cấu trúc state cho phép biểu diễn trạng thái không thể xảy ra. Ba boolean/giá trị độc lập tạo ra tổ hợp mà UI không định nghĩa, và mỗi handler phải nhớ reset đủ cả ba — chỉ cần quên một chỗ là lệch.

Hai cách sửa:

1. Gộp thành một state có ràng buộc — thay ba biến bằng một status dạng chuỗi:

const [status, setStatus] = useState('idle') // idle | loading | success | error

• **2.
• Dùng useReducer** khi các chuyển trạng thái nhiều nhánh và có nhiều nơi cùng cập nhật.
• Reducer gom mọi luật chuyển trạng thái vào một chỗ, đọc và test được độc lập với component:

function reducer(state, action) {
  switch (action.type) {
    case 'fetch':   return { status: 'loading', data: null, error: null }
    case 'success': return { status: 'success', data: action.data, error: null }
    case 'failure': return { status: 'error', data: null, error: action.error }
    default: return state
  }
}

Mỗi action đặt lại toàn bộ trạng thái nên không còn tổ hợp lửng lơ.

Đổi lại là thêm một lớp gián tiếp, nên với state đơn giản (một ô input, một cờ mở/đóng) thì useState vẫn hợp lý hơn.