Chào các bạn, chắc hẳn ai trong các React Developer cũng biết đến một react-hook, một hook rất đặc biệt, một khái niệm mà nhiều người cần bán tán và ngay trong tiêu đề của bài blog cũng đã nói lên tên của hook đó, đó chính là useEffect . Và hôm nay chúng ta hay cũng đâm sâu vào nó nhé. Let’s go!!!
useEffect là một React API, và được xây dựng lên cùng với bộ React core. Theo như tiêu đề là “best practices" thường được hiểu là luyện tập, ôn luyện một cách tốt nhất hay sử dụng sao cho đúng, hợp lý, không bị “ngốc" 🙈. Với một tiêu đề nghe có vẻ “only for newbie” nhưng ở bài blog này, chúng ta sẽ không show ra các case sử dụng useEffect trong react app mà là để “avoid using useEffect in our react application”. Oh tại sao ta lại avoid một API mà do chính React team tạo ra. Chúng ta cùng deep dive nào!!!
Trước khi mình đi vào các case không cần sử dụng useEffect thì cùng đảo qua lại chút một concept mà tôi đoán ai trong các React developer nên/phải biết, đó chính là React-lifecycle.
Mình có lụm được ở đây một sơ đồ để biểu diễn về lifecycle của React
Sơ đồ này được thiết kế bởi chính một thành viên trong React Dev team reference
Chúng ta có thể dễ dàng nhìn thấy quá trình Render và Commit ở phía bên trái và trong mỗi quá trình đó thì ở bên trong component thực hiện hành động gì.
Sẽ khá là mất thời gian để chúng ta có thể quét lại được từng bước trong từng quá trình một, nên ở đây mình có thiết kế ra một bản “lite” để đơn giản hoá hơn sơ đồ về lifecycle.
Component cũng giống như chúng ta vậy. Có giai đoạn sinh ra (componentDidMount), giai đoạn lớn lên (componentDidUpdate) và cuối cùng là giai đoạn “đăng xuất” (componentWillUnmount). Vậy chúng ta có thể theo dõi, nắm bắt được quá trình component mutate này hay không? May mắn thay chính react-hook mà chúng ta đang nhắc tới có thể lắng nghe/theo dõi được sự thay đổi này. Một hook khá là tiềm năng và mạnh mẽ đúng không?
Bên cạnh những lợi ích vốn có mà hook này mang lại thì vẫn tiềm ẩn những vấn đề liên quan đến perfomance của app. Effects là một “lối thoát” từ kiến trúc React ở đây mình gọi là “con cừu đen”, nghe có vẻ lú đúng không? Hiểu nôm na ở đây có nghĩa là Effects đi ngược lại với kiến trúc React. Effect làm bạn bước ra khỏi React và sự đồng bộ components như một vài hệ thống bên ngoài như non-React widget, network, hay DOM Brower. Đọc thêm
Cùng quay lại vấn đề chính nào, ở đây mình sẽ đề cập đến một số cách mà mình có thể avoid được useEffect trong react app mà mình thấy khá hữu hiệu và thông dụng đối với mình.
Giả định rằng, chúng ta có một component cùng với biến state lần lượt là firstName và lastName. Chúng ta muốn output ra một fullName từ 2 state khởi tạo trên bằng cách nối chúng vào với nhau. Hơn thế, chúng ta có thể muốn fullName được tự động update mỗi khi firstName hoặc lastName thay đổi. Bản năng của chúng ta trước tiên có thể thêm một fullName là một biến state và cập nhật chúng ở trong Effect.
