Bài toán về tính toán setState() số lượng touch như Hamster Kombat?

Question

Dạ em chào mọi người hiện em đang dùng NEXTJS tự làm một dự án nhỏ tương tự như Hamster Kombat.

Accepted Answer

Dựa theo những gì bạn nói ở trên, bạn có thể cân nhắc một số giải pháp sau đây:

1. Sử dụng `useReducer` thay vì `useState`:
   - `useReducer` giúp quản lý state phức tạp tốt hơn so với `useState`, đặc biệt là khi có nhiều action cần được xử lý đồng thời. Bạn có thể dùng một reducer để xử lý các hành động tăng điểm và trừ năng lượng. https://react.dev/reference/react/useReducer

2. useTransition: update state ko block UI. https://react.dev/reference/react/useTransition

3. Debounce and Throttle:
   - Khi người dùng click nhanh, bạn có thể sử dụng các kỹ thuật debounce hoặc throttle để giới hạn số lần xử lý hành động. Tham khảo `lodash`

4. Optimistic UI Updates:
   - Cập nhật UI trước và đồng bộ hóa với backend sau. Ví dụ, khi người dùng click để tăng điểm, bạn có thể cập nhật UI ngay lập tức và sau đó gửi yêu cầu cập nhật đến server (`fetch`). Nếu có lỗi xảy ra trong quá trình cập nhật, bạn có thể rollback UI về trạng thái trước đó.

> dựa theo những cái bạn nói thì đây có thể là 1 cách phù hợp. Tham khảo: https://react.dev/reference/react/useOptimistic

5. Web Workers:
   - Nếu có nhiều tính toán phức tạp cần thực hiện, bạn có thể sử dụng Web Workers để xử lý các tính toán này trong một thread riêng biệt, không làm chậm main thread (UI thread).

6. Memoization:
   - Sử dụng `useMemo` và `useCallback` để memoize các giá trị và hàm tính toán, giúp tránh việc tính toán lại không cần thiết trong quá trình render.

7. Request Animation Frame (RAF):
   - Sử dụng `requestAnimationFrame` để cập nhật UI. Cái này (có thể) giúp đảm bảo rằng các cập nhật UI được thực hiện một cách mượt hơn ở mỗi frame. (cách này bạn phải thử để kiểm chứng liệu nó có hiệu quả ko 😁)

1 CÂU TRẢ LỜI