ReactJS: So sánh cách viết logic để sử dụng lại giữa HOCs vs. Render Props vs. Hooks

Trong React, chúng ta có thể sử dụng Higher-Order Components và Render Props để viết một số logic và sử dụng lại cho nhiều component khác nhau. Với React v16.8, chúng ta lại có thêm một lựa chọn tối ưu hơn là sử dụng Hooks. Khi Hooks ra đời, nó đã làm thay đổi toàn … Read moreReactJS: So sánh cách viết logic để sử dụng lại giữa HOCs vs. Render Props vs. Hooks

Tự học ReactJS: React Suspense – So sánh một số cách fetch data từ API

Khi chúng ta fetch data cho một component, chắc chắn mọi người đều muốn lấy data nhanh nhất và sớm nhất có thể. Trước đây, nếu không có React.Suspense chúng ta sẽ gọi API sau khi component mounted. Có lẽ cách này hơi chậm, chúng ta phải chờ cho đến các giai đoạn sau hoàn … Read moreTự học ReactJS: React Suspense – So sánh một số cách fetch data từ API

Tự học ReactJS: React Suspense – Lấy dữ liệu từ API

Concurrent mode là gì? Đây là một kỹ thuật cho phép chúng ta thực hiện một số công việc (như fetch data từ api) song song với quá trình render component. Nó giúp tăng tốc trang web khi load dữ liệu từ server, đặc biệt với các thiết bị low-end như mobile. Lưu ý rằng … Read moreTự học ReactJS: React Suspense – Lấy dữ liệu từ API

Tự học ReactJS: React Patterns – Sử dụng control props

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

Tự học ReactJS: React Patterns – Sử dụng state reducer

Ở 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

Tự học ReactJS: React Patterns – Props collection và getter

Ở 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

Tự học ReactJS: React Patterns – Compound components

Đị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

Tự học ReactJS: React Patterns – Context module function

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

Tự học ReactJS: React Performance – Tối ưu app khi có nhiều component cùng re-render

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

Tự học ReactJS: React Performace – Tối ưu context value

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