Nội dung

20.1 useContext React – Hạn chế của useState với cách truyền props drilling

Trong video này, bạn sẽ được khám phá một trong những vấn đề lớn nhất mà lập trình viên React hay gặp phải khi xây dựng ứng dụng – đó là props drilling, hay còn gọi là truyền props qua nhiều tầng component. Ở phần đầu, video phân tích rõ nhược điểm của việc sử dụng useState để quản lý state khi dữ liệu cần chia sẻ qua nhiều component lồng nhau. Việc phải truyền props qua các component trung gian không thực sự sử dụng đến dữ liệu này không chỉ khiến code trở nên rối rắm, mà còn dễ phát sinh lỗi, khó kiểm soát khi thay đổi cấu trúc hoặc logic ứng dụng. Tiếp theo, bạn sẽ hiểu rõ bản chất của hiện tượng props drilling thông qua sơ đồ minh họa trực quan, giúp hình dung rõ hơn về dòng chảy dữ liệu trong một cây component React truyền thống. Sau đó, video sẽ giới thiệu về useContext – một giải pháp mạnh mẽ giúp loại bỏ hoàn toàn props drilling. Với useContext, bạn có thể chia sẻ dữ liệu hoặc các hàm xử lý tới bất kỳ component con nào mà không cần truyền props qua từng tầng. Phần trình bày sẽ đi qua từng bước sử dụng useContext trong React: từ khâu tạo context, bọc cây component bằng Provider, đến cách truy xuất dữ liệu ở mọi vị trí mong muốn trong cây component. Ngoài lý thuyết, video cũng đưa ra ví dụ thực tế để so sánh trực tiếp giữa cách truyền props truyền thống với giải pháp context, từ đó giúp bạn dễ dàng nhận ra sự khác biệt, ưu nhược điểm và áp dụng vào dự án thực tế của mình. Bên cạnh đó, video còn đưa ra các lưu ý về việc đặt tên file context sao cho đúng chuẩn, giải thích lý do nên đặt đuôi file là .js thay vì .jsx đối với các file không chứa JSX. Cuối cùng, bạn sẽ nắm vững cách tổ chức code, tối ưu cấu trúc dự án, giúp code React của bạn dễ bảo trì, dễ mở rộng và hạn chế lỗi khi phát triển ứng dụng ở quy mô lớn. Nếu bạn là người mới học React hoặc từng gặp khó khăn khi phải truyền dữ liệu qua nhiều tầng component, video này sẽ là tài liệu hữu ích, giúp bạn hiểu rõ hơn về cơ chế truyền dữ liệu trong React và thành thạo việc sử dụng Context API để tối ưu quá trình phát triển ứng dụng web hiện đại.