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 moreTự học ReactJS: React Performance – Tối ưu app khi có nhiều component cùng re-render

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 moreTự học ReactJS: React Performace – Tối ưu context value

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 moreTự học ReactJS: React Performance – Sử dụng react-virtual

Ở 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 moreTự học ReactJS: React.useMemo vs. React.memo hạn chế re-render component như thế nào?

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 moreTự học ReactJS: React Performance – Sử dụng useMemo để tối ưu cho những tính toán phức tạp

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 moreTự học ReactJS: React Performance – Code splitting

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 moreTự học ReactJS: Sử dụng useDebugValue

Trong React, chúng ta có 2 cách để chạy các side-effect là: useEffect useLayoutEffect Sự khác nhau giữa hai thằng này không lớn lắm, và 99% thời gian chúng ta chỉ cần sử dụng useEffect là có thể giải quyết định các side-effect. Nhưng trong một số trường hợp useLayoutEffect vẫn rất hữu ích. Xem … Read moreTự học ReactJS: Sử dụng useLayoutEffect khi nào?

Chia sẻ state giữa các component là bài toán phổ biến trong React app. Giải pháp tốt nhất là bạn phải lifting state. Nhưng nó yêu cầu bạn phải truyền props xuống cho các component con. Điều đó không phải là vấn đề quá lơn, nhưng trong một số trường hợp truyền props xuống quá … Read moreTự học ReactJS: Sử dụng useContext

Bạn có còn nhớ dependency list của useEffect không? Ôn lại một chút nhé: Hãy nhớ rằng React sẽ dựa vào dependency list để so sánh, nếu giá trj trong dependency list thay đổi, React sẽ gọi callback trong useEffect (nếu bạn không truyền dependency list thì useEffect sẽ chạy mỗi khi component render) Điều … Read moreTự học ReactJS: Sử dụng useCallback