Thỉnh thoảng, người dùng (dev) muốn điều khiển và quản lí những state bên trong một component từ bên ngoài. Pattern state reducer cho phép chúng ta quản lí state bên trong component Toggle hiệu quả. Nhưng bây giờ mục tiêu là phải cho phép người dùng (dev) tự quản lí state (on/off) của Toggle … Read moreTự học ReactJS: React Patterns – Sử dụng control props

Ở hai bài trước chúng ta đã sử dụng React.useState để quản lí state (on/off) của Toggle. Nếu như bạn muốn quản lí những component phức tạp hơn như dropdown, autocomplete, table,… Bạn có thể thay thế React.useState bằng React.useReducer. Khi chúng ta quản lí state bằng cách sử dụng React.useReducer thì được gọi là … Read moreTự học ReactJS: React Patterns – Sử dụng state reducer

Ở 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 moreTự học ReactJS: React Patterns – Props collection và getter

Đị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 moreTự học ReactJS: React Patterns – Compound components

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 moreTự học ReactJS: React Patterns – Context module function

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