Công nghệ thay đổi quá nhanh, đôi khi khóa học chưa quay xong mà thư viện nó updates tè le làm nội dung không còn chính xác nữa haha. Mình cũng cố gắng thay đổi theo thời gian, nên viết blog này để note lại những thư viện mình đã dùng cho dự án React theo năm.
Những thư viện mình liệt kê dưới đây là theo cá nhân của mình đã sử dụng trong dự án theo từng thời kỳ, nó không phải là best options của ngành nhé.
Overview
| Chủ đề | 2020-2021 | 2022-2023 |
|---|---|---|
| Form Management | React Hook Form | React Hook Form |
| Form Validation | Yup | Yup |
| State Management | Redux Toolkit | React Query + Zustand |
| Build tool | Create React App | Vite |
| UI lib | Material UI v4 | MUI v5+ |
| Style | SCSS + BEM | JSX / MUI System |
Scroll xuống tí, có thêm chi tiết nè 😊
Form Management + Validation
Trước đây, mình có dùng Redux Form, Formik, kể từ ngày chuyển sang React Hook Form là mình từ bỏ 2 anh kia luôn.
- Redux Form: quản lý form state sử dụng redux, cơ mà hầu hết các tình huống local state là đủ òi.
- Formik: mình bị dính performance issue cho một cái form phức tạp, có tới 20-30 controls nên nó lag tung chảo ở development mode, qua prod thì nó đỡ hơn. Cơ mà mình cũng không ưng lắm.
- React Hook Form: ngon lành, dễ sử dụng, ko bị performance issues, mình dùng tới bây giờ. Đi kèm với việc quản lý form, thì mình có dùng thêm Yup để xử lý cho phần form validation.
Quản lý form là một trong những topic rất quan trọng, nó ảnh hưởng rất lớn tới dự án của mình. Setup đúng sẽ mang lại hiệu quả và không sợ khi làm với form, ngược lại sẽ là ác mộng mỗi lần đụng tới form.
State Management
Một chủ đề quan trọng không kém là quản lý state, việc chọn lựa nơi lưu trữ state, thay đổi state không hợp lý có thể làm cho app của mình có nhiều bugs và khó mà xử lý triệt để.
Mỗi thư viện quản lý state có một cách code khác nhau nên nếu mình cần thay đổi sau này sẽ dẫn tới code changes khá nhiều và phức tạp. Nên việc lựa chọn một thư viện quản lý state + giải pháp hợp lý là cần thiết ngay từ đầu.
- Trước đây thì mình dùng Redux Toolkit cho việc quản lý state.
- Hiện tại mình đang dùng combo react-query và zustand, đơn giản và tiện lợi hơn theo trải nghiệm cá nhân của mình. Các dự án của mình cũng dẫn chuyển sang hướng tiếp cận này.
| # | Phân loại state | Thư viện | Mô tả |
|---|---|---|---|
| 1 | Client State ➡️ Local State | React.useState() | dữ liệu dùng cho một component hiện tại hoặc component con (<= 3 tầng) |
| 2 | Client State ➡️ Global State | zustand | dữ liệu cần chia sẻ cho nhiều components ở nhiều nơi khác nhau |
| 3 | Server State | react-query | dữ liệu trả về từ APIs |
- Với server state --> dùng react-query
- Với client state --> dùng local state cho đến khi cần global state
Cảm ơn bạn đã dành thời gian xem blog của mình 🎉
Easy Frontend - Code xịn hơn mỗi ngày
- 🔥 Khoá học Javascript: https://course.ezfrontend.com/javascript
- 🎁 Khoá học ReactJS: https://course.ezfrontend.com/reactjs
- 🎯 Khóa học NextJS: https://course.ezfrontend.com/nextjs
- ❓ Quyền lợi khi tham gia fan cứng?