Quản lý State trong React: Khi nào nên dùng cái gì
Bạn bắt đầu một dự án React mới. Mọi thứ cảm giác thật gọn gàng. Sau đó, bạn phải truyền dữ liệu qua năm lớp khác nhau. Đây chính là prop-drilling. Bạn cảm thấy bế tắc.
Hãy chọn đúng công cụ.
useState: Túi áo của bạn Sử dụng cái này cho dữ liệu cục bộ. Hãy để những thứ nhỏ nhặt ở đây.
- Trạng thái dropdown
- Các trường nhập liệu (input fields) Hãy giữ nó ở phạm vi cục bộ.
Context API: Tủ lạnh gia đình Mọi người đều có thể lấy dữ liệu mà không cần hỏi trước. Sử dụng cái này cho dữ liệu toàn cục.
- Trạng thái đăng nhập của người dùng
- Cài đặt giao diện (theme)
- Tùy chọn ngôn ngữ Sử dụng cái này cho những dữ liệu hiếm khi thay đổi.
Zustand: Kho lưu trữ Công cụ này rất có tổ chức. Hãy dùng nó cho các dữ liệu lớn.
- Giỏ hàng
- Các bảng điều khiển (dashboard) phức tạp Sử dụng cái này khi ứng dụng của bạn trở nên lộn xộn.
Kế hoạch:
- Bắt đầu với useState.
- Chuyển sang Context khi việc prop-drilling gây khó khăn.
- Chuyển sang Zustand khi hiệu năng giảm sút.
Hãy giữ mọi thứ đơn giản. Chúc bạn lập trình vui vẻ.
Nguồn: https://dev.to/zeeshan_farooq_4ead3782d8/react-state-management-when-to-use-what-a-simple-guide-1cf1