Có lẽ tất cả chúng ta đã quá quen thuộc với hooks trong ReactJS rồi, thậm chí có người đã sử dụng từ ngay những ngày đầu. Hooks được ra mắt trong bản 16.8 của framework reactJS. Hooks đã mang lại cho chúng ta nhưng trải nghiệm mới bằng cách đưa những chức năng dùng trong class based component.

Ngoài những hook mà đã được cung cấp trong framework như useState, useEffect, useContext, … thì chúng ta cũng nó thể tạo ra những custom hook tuỳ thuộc vào dạng chức năng chúng ta muốn. Thì trong bài post này thì mình xin được giới thiệu với mọi người về 1 website rất thú vị (có thể sẽ có nhiểu người biết rồi :v) về một số công thức về hook trong ReactJS (mình xin phép dùng từ recipe thay từ “công thức” trong xuyên suốt bài đọc) và đồng thời cũng giới thiệu một số custom hook thú vị!

1. Giới thiệu về useHooks

Đây là một website cung cấp các recipe liên quan đến hooks trong ReactJS. Như cái tên của website useHooks giới thiệu rất nhiều các recipe về hook dùng để xử lý những khó khăn, tăng những thuận lợi khi chúng ta phát triển website với ReactJS.

Trong một lần search trên google về hook thì mình đã tình cờ thấy được website này (một domain rất hay useHooks.com) và đã rất tò mò vào xem thử thì phát hiện website này rất thú vị và hữu ích cho chúng ta. Thì đã có những bạn đã biết đến website này, thậm chí dùng một số recipe trong này nhưng mình xin phép được giới thiệu một lần nữa.

Bắt đầu thôi!

2. Giới thiệu một số recipe thú vị

Trong quá trình mình đọc về website này thì mình có đưa ra một số hook rất thú vị và hữu ích cho chúng ta trong quá trình làm việc cùng với ReactJS hooks như dưới:

• useRouter
• useEventListener
• useLockBodyScroll

Giờ thì chúng ta cùng xem xét từng recipe một nào!

2.1 useRouter

Nếu bạn có sử dụng thư viện react-router thì ở phiên bản v5.1 thì react-router đã cho ra mắt một số hooks API (useParams, useLocation, useHistory, useRouteMatch) nhằm cung cấp cho chúng ta một cách tiếp cận mới trong cách quản lý các router state. Nhưng trong recipe này nó sẽ cung cấp cho chúng ta một cách dùng mới nhắm giải thiểu những re-render không cần thiết. Vậy hãy cùng xem recipe này nào!

Một recipe rất thú vị đúng không mọi người! Nó sẽ giúp chúng ta sử quản lý state của router thuận tiện hơn trong 1 object duy nhất, không lo về những re-render không cần thiết và không cần phải ...restProps và restProps.history.push(/abc) nữa!

2.2 useEventListener

Trong một số trường hợp chúng ta sẽ phải sử dụng việc thêm một số event listeners bằng cách sử dụng useEffect. Vậy sao chúng ta không suy nghĩ trong việc sử dụng lại logic đó trong một custom hook. Trong công thức này chúng ta sẽ tạo một hook nhằm handle việc addEventListener đó.

Một recipe rất hữu dụng! Nó bao hàm rất nhiều kiến thức bao gồm cả tips and tricks trong ReactJS hooks. Hy vọng nó sẽ mang lại nhiều lợi ích cho mọi người.

2.3 useLockBodyScroll

Lock body scroll một vấn đề chúng ta gặp phải rất nhiều trong quá trình phát triển một website. Trong một số trường hợp chúng ta muốn chặn user khỏi việc scroll (vd như modal chẳng hạn, …). Đây không phải là một vấn đề đơn giản nếu chúng ta phải xử lý trên nhiều môi trường khác nhau. Thì recipe hook bên dưới sẽ giúp chúng ta giải quyết phần nào vấn đề này! Hãy cùng xem xét nào (trong ví dụ này chúng ta sẽ làm về trường hợp modal)!

Recipe này cung cấp cho chúng ta phương pháp dùng để bật tắt scroll trong một số trường hợp (trong ví dụ ở trên là modal). Rất hữu dụng đúng không! Nhưng nó vẫn là công thức, còn khi chúng ta áp dụng thì sẽ còn nhiều trường hợp rẽ nhánh nữa!

3. Kết luận

Vậy là mình đã giới thiệu xong với các bạn về useHooks rồi! Một website rất thú vị đúng không? Những recipe rất hợp lý phải không nào? Nhưng những recipe trên vẫn chỉ là recipe thôi chúng ta cần phải kiểm nghiệm nó xem có run với code trong project của mình nữa. Thì mong là sau bài viết này thì chúng ta sẽ biết thêm một website có thể tham khảo về hook trong ReactJS và cũng như là giúp chúng ta có thể từ đó tạo ra nhiều custom hook thú vị nữa.

Thì website mọi người có thể truy cập ở đây, có rất nhiều hook mà mọi người có thể tham khảo, kèm theo đó là ví dụ trên CodeSandbox nữa. Mong là mọi người sẽ có những giây phút thú vị khi làm việc với hooks và ReactJS.

Thì bài post của mình đến đây là hết rồi! Mong rằng bài post này sẽ giúp mạng lại nhiều lợi ích cho mọi người! Xin cảm ơn và hẹn gặp lại trong các bài post tiếp theo! Xin chào!