Custom hook trong react

Tháng 6 15, 2023

Lập trình & Công nghệ

Hello 5 chăm ae, lại là Tú Pê Vê đây 😁. Bài viết này mình sẽ giới thiệu với các bạn về custom là gì và dùng như thế nào nhé.

Custom hook là những hook riêng do chúng ta tạo, để chúng ta chia sẻ state, logic giữa các component với nhau.

Mình để ví dụ ở đây anh em có thể vào xem thử nhé

</p> <p>Mình có ví dụ trên thì đoạn xử lý logic gọi api getUser() được dùng dụng ở nhiều nơi. Thì những trường hợp như thế này mình có thể dùng custom hook để chia sẻ logic với nhau, code mình cũng ngắn hơn về sau dễ maintain nữa.</p> <pre><code>const [user, setUser] = useState({}); useEffect(() => { getUser().then((res) => { setUser(res.data); }); }, []);</code></pre> <p>Mình sẽ tạo file bắt đầu bằng chữ <code>use</code> để cho đồng bộ với các hook của React như useState, useEffect… thì mình custom cũng thế. Mình sẽ tạo</p> <p>Khi custom hook chúng ta ko cần return về jsx nữa, chúng ta thường return về 1 object hoặc array gì đấy hoặc rerturn thẳng về value luôn cũng được :v. Tùy theo component của mình dùng gì thì mình sẽ return về cái đấy.</p> <p>Mình có thể truyền value khởi tạo như useState chẳng hạn, để tăng tính linh hoạt hơn hook của mình.</p> <p>Khi mình chạy component cart, thì ở đây mình có gọi hook useUser() nên sẽ chạy hàm useUser thì trong đó nó gọi useState cũng như useEffect làm cho component Cart của mình re-render đồng thời nó cập nhật user cho cúng ta. Y hệt mình dùng như bình thường, chỉ khác là mình tách ra 1 function riêng biệt, nhờ vậy chúng ta có thể dùng lại logic giữa các component với nhau có thể gọi là common hơn 👍</p> <p>Hy vọng bài này sẽ giúp ae hiểu được custom hook là gì và áp dụng khi cần thiết nhé. Gút baiiiiiiiii 🙋‍♂️</p> </div> </article> </div> <div> <div> <div class="mb-5"> <div class=" rounded-lg h-[150px] overflow-hidden relative after:bg-black/50 after:z-[2] after:absolute after:inset-0 group"> <img src="https://phamvantu.com/wp-content/uploads/2026/09/web-design.webp" alt="Thiết kế website" class="absolute inset-0 w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-110"> <a href="https://phamvantu.com/" class="whitespace-nowrap font-bold absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 z-[3] text-white p-1"> Thiết kế website </a> </div> <div class="mt-5 rounded-lg h-[150px] overflow-hidden relative after:bg-black/50 after:z-[2] after:absolute after:inset-0 group"> <img src="https://phamvantu.com/wp-content/uploads/2026/09/banner-design-service.webp" alt="Thiết kế logo - banner" class="absolute inset-0 w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-110"> <a href="https://phamvantu.com/" class="whitespace-nowrap font-bold absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 z-[3] text-white p-1"> Thiết kế logo - banner </a> </div> </div> <div class="card-common sm:block hidden w-[250px]"> <h3 class="dark:text-textPrimaryDark text-primary mb-4 font-bold text-[17px] uppercase">Chuyên mục</h3> <div> <a href="https://phamvantu.com/danh-muc/lap-trinh-cong-nghe/" class="flex items-center gap-x-2.5 "> <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-[#8b939d]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s4.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg> <p class="text-[#555555] text-sm line-clamp-1 dark:text-textPrimaryDark dark:hover:text-white hover:text-primary">Lập trình & Công nghệ</p> </a> <a href="https://phamvantu.com/danh-muc/seo/" class="flex items-center gap-x-2.5 pt-4 mt-4 border-t border-[#ededed] border-dashed dark:border-[#494949]"> <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-[#8b939d]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s4.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg> <p class="text-[#555555] text-sm line-clamp-1 dark:text-textPrimaryDark dark:hover:text-white hover:text-primary">SEO</p> </a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </main> <footer class="dark:bg-grayDark pb-16 md:pb-0"> <div class="container mx-auto"> <p class="text-center p-4 text-sm text-[#222] dark:text-textPrimaryDark"> Copyright © 2026 Blog Phạm Văn Tú. Design by <span class="text-primary font-semibold">TuPV</span> </p> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/phamvantu-com/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="swiper-js" src="https://phamvantu.com/wp-content/themes/phamvantu-com/assets/vendor/swiper/swiper-bundle.min.js?ver=14.2.0"></script> <script id="highlightjs-js" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js?ver=11.9.0"></script> <script id="phamvantu-main-js-extra"> var phamvantuOrder = {"ajaxUrl":"https://phamvantu.com/wp-admin/admin-ajax.php","nonce":"d9fe141544"}; var phamvantuContact = {"ajaxUrl":"https://phamvantu.com/wp-admin/admin-ajax.php","nonce":"0cbb864ae4"}; var phamvantuLoadMore = {"ajaxUrl":"https://phamvantu.com/wp-admin/admin-ajax.php","nonce":"6f5d6e0e44"}; //# sourceURL=phamvantu-main-js-extra </script> <script id="phamvantu-main-js" src="https://phamvantu.com/wp-content/themes/phamvantu-com/assets/js/main.js?ver=1.0.0"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://phamvantu.com/wp-includes/js/wp-emoji-release.min.js?ver=7.1.3"}} </script> <script type="module"> /*! This file is auto-generated */ var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))}); //# sourceURL=https://phamvantu.com/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>

Xin Chào, Mình Là Tú Ngồi Đây Viết Cho Vui

Xin Chào, Mình Là Tú Ngồi Đây Viết Cho Vui

Phạm Văn Tú

Giới thiệu

Hình ảnh

Bạn bè

Custom hook trong react