Ở bài trước chúng ta đã bàn luận về Toggle component và cách để làm nó dễ dàng sử dụng hơn bằng functional component. Trong này bài, chúng ta tiếp tục sử dụng Toggle làm ví dụ nhưng với cách khác là dùng props collections và getter để cài đặt nó với custom hook (useToggle). … [Read more…]
Định nghĩa Khi chúng ta kết hợp nhiều components với nhau tạo thành một component hoàn chỉnh được gọi là compound component. Một ví dụ kinh điển là <select> và <option> trong HTML: <select> có nhiệm vụ quản lí state (option nào được nào, và active option nào), còn <option> thì đảm nhận trách nhiệm … [Read more…]
Bài toán Giả sử chúng ta có đoạn code sử dụng React.Context và React.useReducer cho ví dụ kinh điển Counter như sau: Nếu chú ý vào Counter component, chúng ta nhận thấy rằng có hai hàm increment và decrement gọi dispatch. Có vẻ cách viết này hơi rườm rà và hơi bất tiện nếu chúng … [Read more…]
Vấn đề là gì? Khi bạn build một React app thực sự lớn để phục vụ hàng triệu người dùng, chắc chắn bạn phải có giải pháp để quản lí state như Redux, React Context, Mobx … Và cho dù bạn xài thư viện nào để quản lí state bạn cũng sẽ gặp vấn đề … [Read more…]
Khi sử dụng context trong React, chúng ta nên lưu ý khi value của context provider thay đổi thì tất cả những component sử dụng context đó sẽ bị render lại. Nó re-render ngay khi chúng ta đã memo component đó. Giả sử chúng ta có Counter Context như sau: Nếu CountProvider re-render thì const … [Read more…]
Vấn đề là gì? Như chúng ta biết thì React rất tối ưu khi update DOM, nhưng trong một số trường hợp chúng ta render một list quá nhiều phần tử có khi lên đến hàng ngàn item sẽ ảnh hưởng đến performance. Bạn hãy tưởng tượng như khi bạn loop qua một list gồm … [Read more…]
Ở bài viết trước chúng ta đã tìm hiểu về React.useMemo để tối ưu tính toán phức tạp trong component. Vậy React.memo có giống useMemo hay không và được sử dụng để làm gì? React.memo React.memo là HOC trong React, nó nhận vào một component và trả về một component (memoized component) để hạn chế … [Read more…]
React hooks rất là tuyệt vời khi nó cho phép chúng ta chỉ sử dụng duy nhất functional component trong app của chúng ta. Và chúng ta có thể đặt logic và state bên trong function quá là tiện lợi. Hơn thế nữa nó cho phép chúng ta tạo custom hook và sử dụng lại … [Read more…]
Chia nhỏ code (code splitting) là một kỹ thuật cho phép chúng ta tải ít code hơn cho một website và tất nhiên nó sẽ làm app nhanh hơn. Ví dụ như chúng ta đang cài đặt một dashboard có xài thư viện D3 để vẽ chart. Người dùng sau đó sử dụng bắt đầu … [Read more…]
Chắc các bạn đã quen với React Devtools. Khi bạn viết một custom hook, bạn cần có một label cho nó trong React DevTools để dễ dàng debug được hook đó. useDebugValue cho phép chúng ta đặt label cho custom hook của chúng ta như sau: Ví dụ chúng ta có custom hook useMedia như … [Read more…]