I Built A WordPress-like Hook System For Node.js To Decouple My Code

New Story

by

@hacker86635921

@hacker86635921

September 17th, 2025

Audio Presented by

Speed

Voice

@hacker86635921

@hacker86635921

@hacker86635921

About Author

@hacker86635921

Read my storiesLearn More

Comments

</form> </div> </div> </div> </div> <section class="px-4 py-3 sm:px-8 sm:py-6 mt-10 "> <h4 class="text-xl xs:text-2xl sm:text-3xl font-bold mb-4 sm:mb-6">TOPICS</h4> <div class="flex flex-wrap gap-2"><i class="hn hn-programming mr-2"/><span>programming</span>#javascript#nodejs#hooks#wordpress#opensource#wordpress-like-hook-system#node.js-hook-system#decouple-my-code</div> </section> <section class="w-full"> <div class="px-4 py-3 sm:px-8 sm:py-6 my-4 w-full"> <h4 class="text-sm xs:text-xl sm:text-3xl font-bold mb-4 sm:mb-6 flex justify-bwetween items-center w-full">THIS ARTICLE WAS FEATURED IN</h4> <div class="flex flex-wrap gap-2"> <div class="w-[75px] text-center"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2727%27/%3e"/></span><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img srcset="https://hackernoon.imgix.net/images/sia.svg?auto=format&fit=max&w=48 1x, https://hackernoon.imgix.net/images/sia.svg?auto=format&fit=max&w=96 2x" src="https://hackernoon.imgix.net/images/sia.svg?auto=format&fit=max&w=96" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></span></div> <div class="flex items-center"><i class="hn hn-arweave text-lightText text-2xl"/></p> <p>Arweave</p> </div> <div style="display:flex;align-items:center;justify-self:center"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2724%27%20height=%2724%27/%3e"/></span><img alt="viewblock" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="viewblock" srcset="https://hackernoon.imgix.net/images/viewblock.png?auto=format&fit=max&w=32 1x, https://hackernoon.imgix.net/images/viewblock.png?auto=format&fit=max&w=48 2x" src="https://hackernoon.imgix.net/images/viewblock.png?auto=format&fit=max&w=48" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></span></p> <p>ViewBlock</p> </div> <p><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2722%27%20height=%2722%27/%3e"/></span><img alt="Terminal" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="Terminal" srcset="https://hackernoon.imgix.net/computer.png?auto=format&fit=max&w=32 1x, https://hackernoon.imgix.net/computer.png?auto=format&fit=max&w=48 2x" src="https://hackernoon.imgix.net/computer.png?auto=format&fit=max&w=48" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></span><span class="ml-2">Terminal</span><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2722%27%20height=%2722%27/%3e"/></span><img alt="Lite" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="mr-2" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="Lite" srcset="https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&fit=max&w=32 1x, https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&fit=max&w=48 2x" src="https://hackernoon.imgix.net/images/Lite%20Icon%20%4025px.png?auto=format&fit=max&w=48" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="mr-2" loading="lazy"/></span><span class="ml-2">Lite</span></p> <div class="flex items-center px-4 py-2 rounded font-bold shadow-sm transition-all text-sm hover:bg-lightAlt text-lightText border border-lightBorder "><img decoding="async" src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&url=https://hackernoon.com/archives/2025/9/17&size=16" width="20" height="20" class="mr-2 rounded" alt=""/><span class="text-sm sm:text-lg font-light">Archives</span></div> <div class="flex items-center px-4 py-2 rounded font-bold shadow-sm transition-all text-sm hover:bg-lightAlt text-lightText border border-lightBorder "><img decoding="async" src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&url=https://mas.to/@hackernoon/115218127052174928&size=16" width="20" height="20" class="mr-2 rounded" alt=""/><span class="text-sm sm:text-lg font-light">Mas</span></div> </div> </div> </section> <section class="px-4 py-3 sm:px-8 sm:py-6 my-4"> <h4 class="text-xl xs:text-2xl sm:text-3xl font-bold mb-6 uppercase flex justify-bwetween items-center w-full">Related Stories</h4> <div class="hidden sm:block"> <div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 3xl:grid-cols-3 3xl:gap-4 gap-4 "> <div class=" border xs:my-3 sm:m-0 border-lightBorder rounded-md "> <article class="relative group w-full h-full flex flex-col rounded-lg undefined text-darkText p-0"> <div class="relative overflow-hidden w-full rounded-t-lg "><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:50%"/><img alt="Story image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("/placeholder.jpg")"/><img alt="Story image" sizes="(max-width: 768px) 100vw, 400px" srcset="https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=640 640w, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=750 750w, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=828 828w, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=1080 1080w, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=1200 1200w, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=1920 1920w, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=2048 2048w, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=3840 3840w" src="https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=3840" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " loading="lazy"/></span></div> <div class="flex flex-col text-xl p-2 justify-between flex-1 bg-light rounded-b-lg border-t border-lightBorder"> <div class="flex items-center space-x-2 mt-2"> <div class="sm:hidden md:block"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="Author" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded-full" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="Author" srcset="https://hackernoon.com/fallback-feat.png?auto=format&fit=max&w=48 1x, https://hackernoon.com/fallback-feat.png?auto=format&fit=max&w=96 2x" src="https://hackernoon.com/fallback-feat.png?auto=format&fit=max&w=96" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded-full" loading="lazy"/></span></div> <div class="text-xs "> <p class=" text-lightText font-bold ml-2 flex flex-wrap"><span>HackerNoon Writer</span></p> </div> </div> </div> </article> </div> <div class=" border xs:my-3 sm:m-0 border-lightBorder rounded-md "> <article class="relative group w-full h-full flex flex-col rounded-lg undefined text-darkText p-0"> <div class="relative overflow-hidden w-full rounded-t-lg "><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:50%"/><img alt="How to Fetch API Data With RTK (Redux-Toolkit)" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("/placeholder.jpg")"/><img alt="How to Fetch API Data With RTK (Redux-Toolkit)" sizes="(max-width: 768px) 100vw, 400px" srcset="https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=640 640w, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=750 750w, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=828 828w, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=1080 1080w, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=1200 1200w, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=1920 1920w, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=2048 2048w, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=3840 3840w" src="https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=3840" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " loading="lazy"/></span></p> <div class="absolute bottom-2 right-2 z-[2] flex items-center justify-center rounded">#REACT-HOOK</div> </div> <div class="flex flex-col text-xl p-2 justify-between flex-1 bg-light rounded-b-lg border-t border-lightBorder"> <div class="flex items-center space-x-2 mt-2"> <div class="sm:hidden md:block"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="Daniel" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded-full" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="Daniel" srcset="https://hackernoon.imgix.net/images/avatars/tuT47idjNPerzfEJtln4c5OVtH82.jpg?auto=format&fit=max&w=48 1x, https://hackernoon.imgix.net/images/avatars/tuT47idjNPerzfEJtln4c5OVtH82.jpg?auto=format&fit=max&w=96 2x" src="https://hackernoon.imgix.net/images/avatars/tuT47idjNPerzfEJtln4c5OVtH82.jpg?auto=format&fit=max&w=96" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded-full" loading="lazy"/></span></div> <div class="text-xs "> <p class=" text-lightText font-bold ml-2 flex flex-wrap">Daniel</p> <p class=" text-lightTextLight">Jan 14, 2022 </p> </div> </div> </div> </article> </div> <div class=" border xs:my-3 sm:m-0 border-lightBorder rounded-md "> <article class="relative group w-full h-full flex flex-col rounded-lg undefined text-darkText p-0"> <div class="relative overflow-hidden w-full rounded-t-lg "><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:50%"/><img alt="React Hooks: Revisited" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("/placeholder.jpg")"/><img alt="React Hooks: Revisited" sizes="(max-width: 768px) 100vw, 400px" srcset="https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=640 640w, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=750 750w, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=828 828w, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=1080 1080w, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=1200 1200w, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=1920 1920w, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=2048 2048w, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=3840 3840w" src="https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=3840" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " loading="lazy"/></span></p> <div class="absolute bottom-2 right-2 z-[2] flex items-center justify-center rounded">#REACT</div> </div> <div class="flex flex-col text-xl p-2 justify-between flex-1 bg-light rounded-b-lg border-t border-lightBorder"> <div class="flex items-center space-x-2 mt-2"> <div class="sm:hidden md:block"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="Mihail Gaberov" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded-full" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="Mihail Gaberov" srcset="https://hackernoon.imgix.net/images/avatars/OjybTgu3IxXpnIVNPaKrqkuE5Ol1.jpg?auto=format&fit=max&w=48 1x, https://hackernoon.imgix.net/images/avatars/OjybTgu3IxXpnIVNPaKrqkuE5Ol1.jpg?auto=format&fit=max&w=96 2x" src="https://hackernoon.imgix.net/images/avatars/OjybTgu3IxXpnIVNPaKrqkuE5Ol1.jpg?auto=format&fit=max&w=96" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded-full" loading="lazy"/></span></div> <div class="text-xs "> <p class=" text-lightText font-bold ml-2 flex flex-wrap">Mihail Gaberov</p> <p class=" text-lightTextLight">Mar 01, 2019 </p> </div> </div> </div> </article> </div> <div class=" border xs:my-3 sm:m-0 border-lightBorder rounded-md "> <article class="relative group w-full h-full flex flex-col rounded-lg undefined text-darkText p-0"> <div class="relative overflow-hidden w-full rounded-t-lg "><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:50%"/><img alt="React Hooks — Slower than HOC?" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("/placeholder.jpg")"/><img alt="React Hooks — Slower than HOC?" sizes="(max-width: 768px) 100vw, 400px" srcset="https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=640 640w, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=750 750w, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=828 828w, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=1080 1080w, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=1200 1200w, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=1920 1920w, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=2048 2048w, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=3840 3840w" src="https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=3840" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " loading="lazy"/></span></p> <div class="absolute bottom-2 right-2 z-[2] flex items-center justify-center rounded">#JAVASCRIPT</div> </div> <div class="flex flex-col text-xl p-2 justify-between flex-1 bg-light rounded-b-lg border-t border-lightBorder"> <div class="flex items-center space-x-2 mt-2"> <div class="sm:hidden md:block"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="Arnel Enero" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded-full" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="Arnel Enero" srcset="https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=48 1x, https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=96 2x" src="https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=96" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded-full" loading="lazy"/></span></div> <div class="text-xs "> <p class=" text-lightText font-bold ml-2 flex flex-wrap">Arnel Enero</p> <p class=" text-lightTextLight">Feb 10, 2019 </p> </div> </div> </div> </article> </div> <div class=" border xs:my-3 sm:m-0 border-lightBorder rounded-md "> <article class="relative group w-full h-full flex flex-col rounded-lg undefined text-darkText p-0"> <div class="relative overflow-hidden w-full rounded-t-lg "><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:50%"/><img alt="React Hooks: useState(using the state hook)" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("/placeholder.jpg")"/><img alt="React Hooks: useState(using the state hook)" sizes="(max-width: 768px) 100vw, 400px" srcset="https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=640 640w, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=750 750w, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=828 828w, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=1080 1080w, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=1200 1200w, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=1920 1920w, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=2048 2048w, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=3840 3840w" src="https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=3840" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " loading="lazy"/></span></p> <div class="absolute bottom-2 right-2 z-[2] flex items-center justify-center rounded">#REACT</div> </div> <div class="flex flex-col text-xl p-2 justify-between flex-1 bg-light rounded-b-lg border-t border-lightBorder"> <div class="flex items-center space-x-2 mt-2"> <div class="sm:hidden md:block"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="Manisha" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded-full" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="Manisha" srcset="https://hackernoon.imgix.net/images/avatars/8dnjRPZDFrMHIWnONCl0jr6mpSh1.jpg?auto=format&fit=max&w=48 1x, https://hackernoon.imgix.net/images/avatars/8dnjRPZDFrMHIWnONCl0jr6mpSh1.jpg?auto=format&fit=max&w=96 2x" src="https://hackernoon.imgix.net/images/avatars/8dnjRPZDFrMHIWnONCl0jr6mpSh1.jpg?auto=format&fit=max&w=96" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded-full" loading="lazy"/></span></div> <div class="text-xs "> <p class=" text-lightText font-bold ml-2 flex flex-wrap">Manisha</p> <p class=" text-lightTextLight">Jan 20, 2019 </p> </div> </div> </div> </article> </div> <div class=" border xs:my-3 sm:m-0 border-lightBorder rounded-md "> <article class="relative group w-full h-full flex flex-col rounded-lg undefined text-darkText p-0"> <div class="relative overflow-hidden w-full rounded-t-lg "><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:50%"/><img alt="React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("/placeholder.jpg")"/><img alt="React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook" sizes="(max-width: 768px) 100vw, 400px" srcset="https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=640 640w, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=750 750w, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=828 828w, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=1080 1080w, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=1200 1200w, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=1920 1920w, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=2048 2048w, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=3840 3840w" src="https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=3840" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover transition-transform duration-200 hover:scale-105 " loading="lazy"/></span></p> <div class="absolute bottom-2 right-2 z-[2] flex items-center justify-center rounded">#REACT</div> </div> <div class="flex flex-col text-xl p-2 justify-between flex-1 bg-light rounded-b-lg border-t border-lightBorder"> <div class="flex items-center space-x-2 mt-2"> <div class="sm:hidden md:block"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"/></span><img alt="welly" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded-full" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="welly" srcset="https://hackernoon.imgix.net/images/avatars/jgvl75J01zfc9i0NsYvVgqlVkkh2.jpg?auto=format&fit=max&w=48 1x, https://hackernoon.imgix.net/images/avatars/jgvl75J01zfc9i0NsYvVgqlVkkh2.jpg?auto=format&fit=max&w=96 2x" src="https://hackernoon.imgix.net/images/avatars/jgvl75J01zfc9i0NsYvVgqlVkkh2.jpg?auto=format&fit=max&w=96" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded-full" loading="lazy"/></span></div> <div class="text-xs "> <p class=" text-lightText font-bold ml-2 flex flex-wrap">welly</p> <p class=" text-lightTextLight">Jun 10, 2021 </p> </div> </div> </div> </article> </div> </div> </div> </div> <div class="sm:hidden"> <div class="w-full mx-auto "> <div class="p-0 mb-16"> <div class="border-b last:border-b-0 xl:max-h-[220px] sm:p-4 last:mb-6 border-lightSubtle"> <article class="relative group flex lg:flex mb-2 gap-4"> <div class="hidden sm:block flex-0.2 relative w-[15vw] sm:w-[200px] xl:w-[300px] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27400%27%20height=%27240%27/%3e"/></span><img alt="/undefined feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/undefined feature image" srcset="https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=640 1x, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=828 2x" src="https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=828" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex-1 flex flex-col py-2 pr-4"> <h2 class="text-sm sm:text-base lg:text-lg font-semibold text-lightText hover:underline"></h2> <div class="flex items-center w-full mt-2 flex-1 "> <div class=" sm:hidden flex-0.2 relative min-w-[40%] w-[40%] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27120%27/%3e"/></span><img alt="/undefined feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/undefined feature image" srcset="https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=256 1x, https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=640 2x" src="https://hackernoon.imgix.net/images/img-zw13h4d.png?auto=format&fit=max&w=640" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex flex-1 ml-2 flex-col sm:flex-col h-full justify-between mb-2 min-w-[75px] text-xs sm:text-sm"> <div class="flex items-center flex-wrap text-xs"> <div class="flex items-center flex-0.2 relative w-[25px] h-[25px] sm:h-[50px] sm:w-[50px] overflow-hidden rounded"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"/></span><img alt="author" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="author" srcset="https://hackernoon.com/fallback-feat.png?auto=format&fit=max&w=64 1x, https://hackernoon.com/fallback-feat.png?auto=format&fit=max&w=128 2x" src="https://hackernoon.com/fallback-feat.png?auto=format&fit=max&w=128" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded " loading="lazy"/></span></div> <p><span class=" text-xs lg:text-base flex flex-col text-lightTextLight "><span class="flex flex-wrap"><span class="mr-2 ">by</span><span class="text-lightText ">HackerNoon Writer</span></span></span></div> <div class="flex flex-wrap mt-2 flex-1 justify-between items-center"/></div> </div> </div> </article> </div> <div class="border-b last:border-b-0 xl:max-h-[220px] sm:p-4 last:mb-6 border-lightSubtle"> <article class="relative group flex lg:flex mb-2 gap-4"> <div class="hidden sm:block flex-0.2 relative w-[15vw] sm:w-[200px] xl:w-[300px] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27400%27%20height=%27240%27/%3e"/></span><img alt="/how-to-fetch-api-data-with-rtk-redux-toolkit feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/how-to-fetch-api-data-with-rtk-redux-toolkit feature image" srcset="https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=640 1x, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=828 2x" src="https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=828" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex-1 flex flex-col py-2 pr-4"> <div class="flex items-center w-full mt-2 flex-1 "> <div class=" sm:hidden flex-0.2 relative min-w-[40%] w-[40%] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27120%27/%3e"/></span><img alt="/how-to-fetch-api-data-with-rtk-redux-toolkit feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/how-to-fetch-api-data-with-rtk-redux-toolkit feature image" srcset="https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=256 1x, https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=640 2x" src="https://hackernoon.imgix.net/images/tuT47idjNPerzfEJtln4c5OVtH82-ms02em2.jpeg?auto=format&fit=max&w=640" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex flex-1 ml-2 flex-col sm:flex-col h-full justify-between mb-2 min-w-[75px] text-xs sm:text-sm"> <div class="flex items-center flex-wrap text-xs"> <div class="flex items-center flex-0.2 relative w-[25px] h-[25px] sm:h-[50px] sm:w-[50px] overflow-hidden rounded"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"/></span><img alt="author" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="author" srcset="https://hackernoon.imgix.net/images/avatars/tuT47idjNPerzfEJtln4c5OVtH82.jpg?auto=format&fit=max&w=64 1x, https://hackernoon.imgix.net/images/avatars/tuT47idjNPerzfEJtln4c5OVtH82.jpg?auto=format&fit=max&w=128 2x" src="https://hackernoon.imgix.net/images/avatars/tuT47idjNPerzfEJtln4c5OVtH82.jpg?auto=format&fit=max&w=128" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded " loading="lazy"/></span></div> <p><span class=" text-xs lg:text-base flex flex-col text-lightTextLight "><span class="flex flex-wrap"><span class="mr-2 ">by</span><span class="text-lightText ">Daniel</span></span><span class="group-hover:underline text-xs lg:text-sm ">@Addo</span></span></div> <div class="flex flex-wrap mt-2 flex-1 justify-between items-center"> <div class="flex flex-wrap items-center">#REACT-HOOK</div> </div> </div> </div> </div> </article> </div> <div class="border-b last:border-b-0 xl:max-h-[220px] sm:p-4 last:mb-6 border-lightSubtle"> <article class="relative group flex lg:flex mb-2 gap-4"> <div class="hidden sm:block flex-0.2 relative w-[15vw] sm:w-[200px] xl:w-[300px] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27400%27%20height=%27240%27/%3e"/></span><img alt="/react-hooks-revisited-322d6020ce9c feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-hooks-revisited-322d6020ce9c feature image" srcset="https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=640 1x, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=828 2x" src="https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=828" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex-1 flex flex-col py-2 pr-4"> <div class="flex items-center w-full mt-2 flex-1 "> <div class=" sm:hidden flex-0.2 relative min-w-[40%] w-[40%] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27120%27/%3e"/></span><img alt="/react-hooks-revisited-322d6020ce9c feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-hooks-revisited-322d6020ce9c feature image" srcset="https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=256 1x, https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=640 2x" src="https://hackernoon.imgix.net/hn-images/1*3BveNxR6PettAS98SNHAlQ.jpeg?auto=format&fit=max&w=640" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex flex-1 ml-2 flex-col sm:flex-col h-full justify-between mb-2 min-w-[75px] text-xs sm:text-sm"> <div class="flex items-center flex-wrap text-xs"> <div class="flex items-center flex-0.2 relative w-[25px] h-[25px] sm:h-[50px] sm:w-[50px] overflow-hidden rounded"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"/></span><img alt="author" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="author" srcset="https://hackernoon.imgix.net/images/avatars/OjybTgu3IxXpnIVNPaKrqkuE5Ol1.jpg?auto=format&fit=max&w=64 1x, https://hackernoon.imgix.net/images/avatars/OjybTgu3IxXpnIVNPaKrqkuE5Ol1.jpg?auto=format&fit=max&w=128 2x" src="https://hackernoon.imgix.net/images/avatars/OjybTgu3IxXpnIVNPaKrqkuE5Ol1.jpg?auto=format&fit=max&w=128" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded " loading="lazy"/></span></div> <p><span class=" text-xs lg:text-base flex flex-col text-lightTextLight "><span class="flex flex-wrap"><span class="mr-2 ">by</span><span class="text-lightText ">Mihail Gaberov</span></span><span class="group-hover:underline text-xs lg:text-sm ">@mihailgaberov</span></span></div> <div class="flex flex-wrap mt-2 flex-1 justify-between items-center"> <div class="flex flex-wrap items-center">#REACT</div> </div> </div> </div> </div> </article> </div> <div class="border-b last:border-b-0 xl:max-h-[220px] sm:p-4 last:mb-6 border-lightSubtle"> <article class="relative group flex lg:flex mb-2 gap-4"> <div class="hidden sm:block flex-0.2 relative w-[15vw] sm:w-[200px] xl:w-[300px] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27400%27%20height=%27240%27/%3e"/></span><img alt="/react-hooks-slower-than-hoc-ff105586036 feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-hooks-slower-than-hoc-ff105586036 feature image" srcset="https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=640 1x, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=828 2x" src="https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=828" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex-1 flex flex-col py-2 pr-4"> <div class="flex items-center w-full mt-2 flex-1 "> <div class=" sm:hidden flex-0.2 relative min-w-[40%] w-[40%] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27120%27/%3e"/></span><img alt="/react-hooks-slower-than-hoc-ff105586036 feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-hooks-slower-than-hoc-ff105586036 feature image" srcset="https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=256 1x, https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=640 2x" src="https://hackernoon.imgix.net/hn-images/1*TG28-cSxSs-i4knJ-V5amg.png?auto=format&fit=max&w=640" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex flex-1 ml-2 flex-col sm:flex-col h-full justify-between mb-2 min-w-[75px] text-xs sm:text-sm"> <div class="flex items-center flex-wrap text-xs"> <div class="flex items-center flex-0.2 relative w-[25px] h-[25px] sm:h-[50px] sm:w-[50px] overflow-hidden rounded"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"/></span><img alt="author" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="author" srcset="https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=64 1x, https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=128 2x" src="https://hackernoon.imgix.net/fallback-profile.png?auto=format&fit=max&w=128" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded " loading="lazy"/></span></div> <p><span class=" text-xs lg:text-base flex flex-col text-lightTextLight "><span class="flex flex-wrap"><span class="mr-2 ">by</span><span class="text-lightText ">Arnel Enero</span></span><span class="group-hover:underline text-xs lg:text-sm ">@aenero</span></span></div> <div class="flex flex-wrap mt-2 flex-1 justify-between items-center"> <div class="flex flex-wrap items-center">#JAVASCRIPT</div> </div> </div> </div> </div> </article> </div> <div class="border-b last:border-b-0 xl:max-h-[220px] sm:p-4 last:mb-6 border-lightSubtle"> <article class="relative group flex lg:flex mb-2 gap-4"> <div class="hidden sm:block flex-0.2 relative w-[15vw] sm:w-[200px] xl:w-[300px] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27400%27%20height=%27240%27/%3e"/></span><img alt="/react-hooks-usestate-using-the-state-hook-89ec55b84f8c feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-hooks-usestate-using-the-state-hook-89ec55b84f8c feature image" srcset="https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=640 1x, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=828 2x" src="https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=828" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex-1 flex flex-col py-2 pr-4"> <div class="flex items-center w-full mt-2 flex-1 "> <div class=" sm:hidden flex-0.2 relative min-w-[40%] w-[40%] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27120%27/%3e"/></span><img alt="/react-hooks-usestate-using-the-state-hook-89ec55b84f8c feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-hooks-usestate-using-the-state-hook-89ec55b84f8c feature image" srcset="https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=256 1x, https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=640 2x" src="https://hackernoon.imgix.net/hn-images/1*-Ijet6kVJqGgul6adezDLQ.png?auto=format&fit=max&w=640" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex flex-1 ml-2 flex-col sm:flex-col h-full justify-between mb-2 min-w-[75px] text-xs sm:text-sm"> <div class="flex items-center flex-wrap text-xs"> <div class="flex items-center flex-0.2 relative w-[25px] h-[25px] sm:h-[50px] sm:w-[50px] overflow-hidden rounded"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"/></span><img alt="author" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="author" srcset="https://hackernoon.imgix.net/images/avatars/8dnjRPZDFrMHIWnONCl0jr6mpSh1.jpg?auto=format&fit=max&w=64 1x, https://hackernoon.imgix.net/images/avatars/8dnjRPZDFrMHIWnONCl0jr6mpSh1.jpg?auto=format&fit=max&w=128 2x" src="https://hackernoon.imgix.net/images/avatars/8dnjRPZDFrMHIWnONCl0jr6mpSh1.jpg?auto=format&fit=max&w=128" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded " loading="lazy"/></span></div> <p><span class=" text-xs lg:text-base flex flex-col text-lightTextLight "><span class="flex flex-wrap"><span class="mr-2 ">by</span><span class="text-lightText ">Manisha</span></span><span class="group-hover:underline text-xs lg:text-sm ">@jscodelover</span></span></div> <div class="flex flex-wrap mt-2 flex-1 justify-between items-center"> <div class="flex flex-wrap items-center">#REACT</div> </div> </div> </div> </div> </article> </div> <div class="border-b last:border-b-0 xl:max-h-[220px] sm:p-4 last:mb-6 border-lightSubtle"> <article class="relative group flex lg:flex mb-2 gap-4"> <div class="hidden sm:block flex-0.2 relative w-[15vw] sm:w-[200px] xl:w-[300px] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27400%27%20height=%27240%27/%3e"/></span><img alt="/react-tutorial-how-to-build-a-virtualized-list-with-infinite-scroll-and-a-hook-3x1w3611 feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-tutorial-how-to-build-a-virtualized-list-with-infinite-scroll-and-a-hook-3x1w3611 feature image" srcset="https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=640 1x, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=828 2x" src="https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=828" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex-1 flex flex-col py-2 pr-4"> <div class="flex items-center w-full mt-2 flex-1 "> <div class=" sm:hidden flex-0.2 relative min-w-[40%] w-[40%] overflow-hidden rounded-lg"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27120%27/%3e"/></span><img alt="/react-tutorial-how-to-build-a-virtualized-list-with-infinite-scroll-and-a-hook-3x1w3611 feature image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="/react-tutorial-how-to-build-a-virtualized-list-with-infinite-scroll-and-a-hook-3x1w3611 feature image" srcset="https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=256 1x, https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=640 2x" src="https://hackernoon.imgix.net/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg?auto=format&fit=max&w=640" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-full h-full object-cover rounded-lg transition-transform duration-200 hover:scale-105" loading="lazy"/></span></div> <div class="flex flex-1 ml-2 flex-col sm:flex-col h-full justify-between mb-2 min-w-[75px] text-xs sm:text-sm"> <div class="flex items-center flex-wrap text-xs"> <div class="flex items-center flex-0.2 relative w-[25px] h-[25px] sm:h-[50px] sm:w-[50px] overflow-hidden rounded"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img decoding="async" style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"/></span><img alt="author" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="rounded " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><img alt="author" srcset="https://hackernoon.imgix.net/images/avatars/jgvl75J01zfc9i0NsYvVgqlVkkh2.jpg?auto=format&fit=max&w=64 1x, https://hackernoon.imgix.net/images/avatars/jgvl75J01zfc9i0NsYvVgqlVkkh2.jpg?auto=format&fit=max&w=128 2x" src="https://hackernoon.imgix.net/images/avatars/jgvl75J01zfc9i0NsYvVgqlVkkh2.jpg?auto=format&fit=max&w=128" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="rounded " loading="lazy"/></span></div> <p><span class=" text-xs lg:text-base flex flex-col text-lightTextLight "><span class="flex flex-wrap"><span class="mr-2 ">by</span><span class="text-lightText ">welly</span></span><span class="group-hover:underline text-xs lg:text-sm ">@welly</span></span></div> <div class="flex flex-wrap mt-2 flex-1 justify-between items-center"> <div class="flex flex-wrap items-center">#REACT</div> </div> </div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> <p></main></p> <div class="flex flex-col gap-4 hidden"><button class="mr-auto"><i class="hn-sun hn text-2xl"/></button></p> <h2 class="text-sm font-semibold text-darkText">Light-Mode</h2> <div class="cursor-pointer p-3 rounded-lg hover:scale-105 transition-transform "> <h3 class="text-sm uppercase mb-2 ">Classic</h3> </div> <div class="cursor-pointer p-3 rounded-lg hover:scale-105 transition-transform "> <h3 class="text-sm uppercase mb-2 ">Newspaper</h3> </div> <h2 class="text-sm font-semibold text-darkText">Dark-Mode</h2> <div class="cursor-pointer p-3 rounded-lg hover:scale-105 transition-transform "> <h3 class="text-sm uppercase mb-2 ">Neon Noir</h3> </div> <div class="cursor-pointer p-3 rounded-lg hover:scale-105 transition-transform "> <h3 class="text-sm uppercase mb-2 ">Minty</h3> </div> <div class="cursor-pointer p-3 rounded-lg hover:scale-105 transition-transform "> <h3 class="text-sm uppercase mb-2 ">HN StartUps</h3> </div> </div> </div> </div> </div> </div> <div class="entry-newsletter"><div class="newsletter-box"><div class="newsletter-box-header"><span class="newsletter-icon"><svg class="svg-icon svg-newsletter" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.955,1.314c-3.119-1.78-6.955-1.75-10.045,0.078L313.656,109.756c-4.754,2.811-6.329,8.943-3.518,13.697 c2.81,4.753,8.942,6.328,13.697,3.518l131.482-77.749L210.411,303.335L88.603,266.069l158.965-94 c4.754-2.812,6.329-8.944,3.518-13.698c-2.81-4.753-8.943-6.33-13.697-3.518L58.91,260.392c-3.41,2.017-5.309,5.856-4.84,9.791 s3.216,7.221,7.004,8.38l145.469,44.504L270.72,439.88c0.067,0.121,0.136,0.223,0.207,0.314c1.071,1.786,2.676,3.245,4.678,4.087 c1.253,0.527,2.57,0.784,3.878,0.784c2.563,0,5.086-0.986,6.991-2.849l73.794-72.12l138.806,42.466 c0.96,0.293,1.945,0.438,2.925,0.438c2.116,0,4.206-0.672,5.948-1.961C510.496,409.153,512,406.17,512,403V10 C512,6.409,510.074,3.093,506.955,1.314z M271.265,329.23c-1.158,1.673-1.779,3.659-1.779,5.694v61.171l-43.823-79.765 l193.921-201.21L271.265,329.23z M289.486,411.309v-62.867l48.99,14.988L289.486,411.309z M492,389.483l-196.499-60.116 L492,45.704V389.483z" /><path fill="currentColor" d="M164.423,347.577c-3.906-3.905-10.236-3.905-14.143,0l-93.352,93.352c-3.905,3.905-3.905,10.237,0,14.143 C58.882,457.024,61.441,458,64,458s5.118-0.976,7.071-2.929l93.352-93.352C168.328,357.815,168.328,351.483,164.423,347.577z" /><path fill="currentColor" d="M40.071,471.928c-3.906-3.903-10.236-3.903-14.142,0.001l-23,23c-3.905,3.905-3.905,10.237,0,14.143 C4.882,511.024,7.441,512,10,512s5.118-0.977,7.071-2.929l23-23C43.976,482.166,43.976,475.834,40.071,471.928z" /><path fill="currentColor" d="M142.649,494.34c-1.859-1.86-4.439-2.93-7.069-2.93c-2.641,0-5.21,1.07-7.07,2.93c-1.86,1.86-2.93,4.43-2.93,7.07 c0,2.63,1.069,5.21,2.93,7.07c1.86,1.86,4.44,2.93,7.07,2.93s5.21-1.07,7.069-2.93c1.86-1.86,2.931-4.44,2.931-7.07 C145.58,498.77,144.51,496.2,142.649,494.34z" /><path fill="currentColor" d="M217.051,419.935c-3.903-3.905-10.233-3.905-14.142,0l-49.446,49.445c-3.905,3.905-3.905,10.237,0,14.142 c1.953,1.953,4.512,2.929,7.071,2.929s5.118-0.977,7.071-2.929l49.446-49.445C220.956,430.172,220.956,423.84,217.051,419.935z" /><path fill="currentColor" d="M387.704,416.139c-3.906-3.904-10.236-3.904-14.142,0l-49.58,49.58c-3.905,3.905-3.905,10.237,0,14.143 c1.953,1.952,4.512,2.929,7.071,2.929s5.118-0.977,7.071-2.929l49.58-49.58C391.609,426.377,391.609,420.045,387.704,416.139z" /><path fill="currentColor" d="M283.5,136.31c-1.86-1.86-4.44-2.93-7.07-2.93s-5.21,1.07-7.07,2.93c-1.859,1.86-2.93,4.44-2.93,7.08 c0,2.63,1.07,5.2,2.93,7.06c1.86,1.87,4.44,2.93,7.07,2.93s5.21-1.06,7.07-2.93c1.859-1.86,2.93-4.43,2.93-7.06 C286.43,140.75,285.36,138.17,283.5,136.31z" /></svg></span><div class="inner"><h2 class="newsletter-box-title">Sign Up For Daily Newsletter</h2><h6 class="newsletter-box-description">Be keep up! Get the latest breaking news delivered straight to your inbox.</h6></div></div><div class="newsletter-box-content"><script>(function() { window.mc4wp = window.mc4wp || { listeners: [], forms: { on: function(evt, cb) { window.mc4wp.listeners.push( { event : evt, callback: cb } ); } } } })(); </script><form id="mc4wp-form-2" class="mc4wp-form mc4wp-form-2464" method="post" data-id="2464" data-name="form" ><div class="mc4wp-form-fields"><div class="mc4wp-form-fields"><div> <input type="email" name="EMAIL" placeholder="Your email address" required=""> <input type="submit" value="Sign Up Now"></div><div class="agree-to-terms"> <input name="AGREE_TO_TERMS" aria-label="checkbox" type="checkbox" value="1" required=""><label for="AGREE_TO_TERMS">I have read and agree to the terms & conditions</label></div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1698909445"><input type="hidden" name="_mc4wp_form_id" value="1616"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-2"><div class="mc4wp-response"></div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off" /></label><input type="hidden" name="_mc4wp_timestamp" value="1765757563" /><input type="hidden" name="_mc4wp_form_id" value="2464" /><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-2" /><div class="mc4wp-response"></div></form></div><div class="newsletter-box-policy">By signing up, you agree to our <a href="#">Terms of Use</a> and acknowledge the data practices in our <a href="#">Privacy Policy</a>. You may unsubscribe at any time.</div></div></div> </div> </div> <div class="e-shared-sec entry-sec"> <div class="e-shared-header h4"> <i class="rbi rbi-share" aria-hidden="true"></i><span>Share This Article</span> </div> <div class="rbbsl tooltips-n effect-fadeout is-bg"> <a class="share-action share-trigger icon-facebook" aria-label="Share on Facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldofsoftware.org%2Fi-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon%2F" data-title="Facebook" rel="nofollow"><i class="rbi rbi-facebook" aria-hidden="true"></i><span>Facebook</span></a> <a class="share-action share-trigger icon-twitter" aria-label="Share on Twitter" href="https://twitter.com/intent/tweet?text=I+Built+a+WordPress-like+Hook+System+for+Node.js+to+Decouple+My+Code+%7C+HackerNoon&url=https%3A%2F%2Fworldofsoftware.org%2Fi-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon%2F&via=World+of+Software" data-title="Twitter" rel="nofollow"> <i class="rbi rbi-twitter" aria-hidden="true"></i><span>Twitter</span></a> <a class="share-action icon-email" aria-label="Email" href="mailto:?subject=I%20Built%20a%20WordPress-like%20Hook%20System%20for%20Node.js%20to%20Decouple%20My%20Code%20|%20HackerNoon%20BODY=I%20found%20this%20article%20interesting%20and%20thought%20of%20sharing%20it%20with%20you.%20Check%20it%20out:%20https://worldofsoftware.org/i-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon/" data-title="Email" rel="nofollow"> <i class="rbi rbi-email" aria-hidden="true"></i><span>Email</span></a> <a class="share-action icon-print" aria-label="Print" rel="nofollow" href="javascript:if(window.print)window.print()" data-title="Print"><i class="rbi rbi-print" aria-hidden="true"></i><span>Print</span></a> <a class="share-action native-share-trigger more-icon" aria-label="More" href="#" data-link="https://worldofsoftware.org/i-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon/" data-ptitle="I Built a WordPress-like Hook System for Node.js to Decouple My Code | HackerNoon" data-title="More" rel="nofollow"><i class="rbi rbi-more" aria-hidden="true"></i></a> </div> </div> <div class="sticky-share-list-buffer"> <div class="sticky-share-list"> <div class="t-shared-header meta-text"> <i class="rbi rbi-share" aria-hidden="true"></i> <span class="share-label">Share</span> </div> <div class="sticky-share-list-items effect-fadeout is-color"> <a class="share-action share-trigger icon-facebook" aria-label="Share on Facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldofsoftware.org%2Fi-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon%2F" data-title="Facebook" data-gravity=n rel="nofollow"><i class="rbi rbi-facebook" aria-hidden="true"></i></a> <a class="share-action share-trigger icon-twitter" aria-label="Share on Twitter" href="https://twitter.com/intent/tweet?text=I+Built+a+WordPress-like+Hook+System+for+Node.js+to+Decouple+My+Code+%7C+HackerNoon&url=https%3A%2F%2Fworldofsoftware.org%2Fi-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon%2F&via=World+of+Software" data-title="Twitter" data-gravity=n rel="nofollow"> <i class="rbi rbi-twitter" aria-hidden="true"></i></a> <a class="share-action icon-email" aria-label="Email" href="mailto:?subject=I%20Built%20a%20WordPress-like%20Hook%20System%20for%20Node.js%20to%20Decouple%20My%20Code%20|%20HackerNoon%20BODY=I%20found%20this%20article%20interesting%20and%20thought%20of%20sharing%20it%20with%20you.%20Check%20it%20out:%20https://worldofsoftware.org/i-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon/" data-title="Email" data-gravity=n rel="nofollow"> <i class="rbi rbi-email" aria-hidden="true"></i></a> <a class="share-action icon-copy copy-trigger" aria-label="Copy Link" href="#" data-copied="Copied!" data-link="https://worldofsoftware.org/i-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon/" rel="nofollow" data-copy="Copy Link" data-gravity=n><i class="rbi rbi-link-o" aria-hidden="true"></i></a> <a class="share-action icon-print" aria-label="Print" rel="nofollow" href="javascript:if(window.print)window.print()" data-title="Print" data-gravity=n><i class="rbi rbi-print" aria-hidden="true"></i></a> <a class="share-action native-share-trigger more-icon" aria-label="More" href="#" data-link="https://worldofsoftware.org/i-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon/" data-ptitle="I Built a WordPress-like Hook System for Node.js to Decouple My Code | HackerNoon" data-title="More" data-gravity=n rel="nofollow"><i class="rbi rbi-more" aria-hidden="true"></i></a> </div> </div> </div> <aside class="reaction-sec entry-sec"> <div class="reaction-heading"> <span class="h3">What do you think?</span> </div> <div class="reaction-sec-content"> <aside id="reaction-761371" class="rb-reaction reaction-wrap" data-pid="761371"><div class="reaction" data-reaction="love"><span class="reaction-content"><i class="reaction-icon"><svg class="svg-icon svg-icon-love" aria-hidden="true" role="img" focusable="false" viewBox="0 0 32 33.217" xmlns="http://www.w3.org/2000/svg"><linearGradient gradientTransform="matrix(-1 0 0 1 69.8398 0.3862)" gradientUnits="userSpaceOnUse" id="svg_love" x1="45.8389" x2="61.8413" y1="2.9731" y2="30.6902"><stop offset="0" style="stop-color:#FFE254"/><stop offset="1" style="stop-color:#FFB255"/></linearGradient><circle cx="16" cy="17.217" r="16" style="fill:url(#svg_love);"/><path d="M17.63,25.049c5.947-1.237,9.766-7.062,8.528-13.01L4.619,16.521 C5.857,22.468,11.682,26.287,17.63,25.049z" style="fill:#F52C5B;"/><path d="M16,17.217c3.345-0.695,6.649,0.207,9.121,2.188c1.152-2.183,1.579-4.763,1.037-7.366L4.619,16.521 c0.542,2.604,1.962,4.798,3.889,6.341C9.984,20.059,12.655,17.913,16,17.217z" style="fill:#212731;"/><path d="M11.096,3.674c2.043,2.603-3.6,6.933-3.6,6.933s-6.901-1.72-6.065-4.923 c0.802-3.071,4.802-1.15,4.802-1.15S9.136,1.177,11.096,3.674z" style="fill:#F52C5B;"/><path d="M23.822,1.026c2.044,2.604-3.599,6.934-3.599,6.934s-6.901-1.721-6.065-4.923 c0.802-3.071,4.802-1.15,4.802-1.15S21.863-1.47,23.822,1.026z" style="fill:#F52C5B;"/></svg></i><span class="reaction-title h6">Love</span></span><span class="reaction-count">0</span></div><div class="reaction" data-reaction="sad"><span class="reaction-content"><i class="reaction-icon"><svg class="svg-icon svg-icon-sad" aria-hidden="true" role="img" focusable="false" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><linearGradient gradientUnits="userSpaceOnUse" id="svg_sad" x1="24.001" x2="7.9984" y1="2.1416" y2="29.8589"><stop offset="0" style="stop-color:#FFE254"/><stop offset="1" style="stop-color:#FFB255"/></linearGradient><circle cx="16" cy="16" r="16" style="fill:url(#svg_sad);"/><circle cx="9" cy="16" r="2" style="fill:#212731;"/><circle cx="23" cy="16" r="2" style="fill:#212731;"/><path d="M21,24c-2.211-2.212-7.789-2.212-10,0" style="fill:none;stroke:#212731;stroke-width:1.2804;stroke-miterlimit:10;"/><path d="M25,27c0,1.104-0.896,2-2,2s-2-0.896-2-2s2-4,2-4S25,25.896,25,27z" style="fill:#2667C6;"/><path d="M27,14c-1-2-3-3-5-3" style="fill:none;stroke:#212731;stroke-miterlimit:10;"/><path d="M5,14c1-2,3-3,5-3" style="fill:none;stroke:#212731;stroke-miterlimit:10;"/></svg></i><span class="reaction-title h6">Sad</span></span><span class="reaction-count">0</span></div><div class="reaction" data-reaction="happy"><span class="reaction-content"><i class="reaction-icon"><svg class="svg-icon svg-icon-happy" aria-hidden="true" role="img" focusable="false" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><linearGradient gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" id="svg_happy" x1="314.001" x2="297.998" y1="-349.1416" y2="-376.8595"><stop offset="0" style="stop-color:#FFE254"/><stop offset="1" style="stop-color:#FFB255"/></linearGradient><circle cx="16" cy="16" r="16" style="fill:url(#svg_happy);"/><path d="M16,27c6.075,0,11-4.925,11-11H5C5,22.075,9.925,27,16,27z" style="fill:#F52C5B;"/><path d="M16,19c3.416,0,6.468,1.557,8.484,4C26.057,21.098,27,18.659,27,16H5c0,2.659,0.944,5.098,2.515,7 C9.532,20.557,12.584,19,16,19z" style="fill:#212731;"/><path d="M26.85,13.38c-0.08,0.271-0.379,0.41-0.64,0.33l-4.81-1.47c-0.271-0.08-0.4-0.36-0.4-0.62v-0.24 c0-0.26,0.13-0.54,0.4-0.62l4.84-1.47c0.27-0.08,0.55,0.06,0.63,0.33c0.08,0.26-0.07,0.54-0.341,0.62L22.45,11.5l4.079,1.26 C26.79,12.84,26.93,13.12,26.85,13.38z" style="fill:#212731;"/><path d="M5.042,9.62c0.08-0.271,0.38-0.41,0.64-0.33l4.864,1.47C10.816,10.84,11,11.12,11,11.38v0.24 c0,0.26-0.184,0.54-0.454,0.62l-4.867,1.47c-0.27,0.08-0.563-0.06-0.644-0.33c-0.08-0.26,0.063-0.54,0.333-0.62l4.076-1.26 l-4.082-1.26C5.103,10.16,4.961,9.88,5.042,9.62z" style="fill:#212731;"/></svg></i><span class="reaction-title h6">Happy</span></span><span class="reaction-count">0</span></div><div class="reaction" data-reaction="sleepy"><span class="reaction-content"><i class="reaction-icon"><svg class="svg-icon svg-icon-sleepy" aria-hidden="true" role="img" focusable="false" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><linearGradient gradientUnits="userSpaceOnUse" id="svg_sleepy" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586"><stop offset="0" style="stop-color:#FFE254"/><stop offset="1" style="stop-color:#FFB255"/></linearGradient><circle cx="16" cy="16" r="16" style="fill:url(#svg_sleepy);"/><path d="M26,22c0,2.761-4.477,5-10,5S6,24.761,6,22s4.477-3,10-3S26,19.239,26,22z" style="fill:#F52C5B;"/><path d="M16,19c-5.523,0-10,0.239-10,3c0,1.183,0.826,2.268,2.199,3.123C8.998,23.337,12.185,22,16,22 s7.001,1.337,7.801,3.123C25.174,24.268,26,23.183,26,22C26,19.239,21.523,19,16,19z" style="fill:#212731;"/><path d="M26,11c-0.94,4.015-5.941,3.985-7,0" style="fill:none;stroke:#212731;stroke-miterlimit:10;"/><path d="M13,11c-0.941,4.014-5.941,3.984-7,0" style="fill:none;stroke:#212731;stroke-miterlimit:10;"/><path d="M23.098,21.845c0,0.191-0.156,0.348-0.348,0.348h-1.752c-0.132,0-0.258-0.078-0.317-0.204 c-0.024-0.048-0.03-0.096-0.03-0.149c0-0.078,0.023-0.156,0.078-0.223L22,20.094h-1.002c-0.191,0-0.348-0.156-0.348-0.348 c0-0.198,0.156-0.354,0.348-0.354h1.752c0.137,0,0.258,0.078,0.317,0.204c0.018,0.048,0.03,0.096,0.03,0.144 c0,0.084-0.024,0.162-0.078,0.229l-1.271,1.523h1.002C22.941,21.491,23.098,21.646,23.098,21.845z" style="fill:#43AF20;"/><path d="M26.926,20.286c0,0.256-0.208,0.464-0.464,0.464h-2.335c-0.176,0-0.344-0.104-0.424-0.271 c-0.031-0.064-0.039-0.128-0.039-0.2c0-0.104,0.031-0.208,0.104-0.296l1.695-2.031h-1.336c-0.256,0-0.463-0.207-0.463-0.463 c0-0.265,0.207-0.473,0.463-0.473h2.335c0.185,0,0.344,0.104,0.424,0.272c0.024,0.063,0.04,0.128,0.04,0.191 c0,0.112-0.032,0.216-0.104,0.304l-1.695,2.031h1.335C26.718,19.814,26.926,20.022,26.926,20.286z" style="fill:#43AF20;"/><path d="M31.582,18.42c0,0.32-0.26,0.58-0.58,0.58h-2.918c-0.22,0-0.43-0.13-0.529-0.34 c-0.041-0.08-0.051-0.16-0.051-0.25c0-0.13,0.041-0.26,0.131-0.37l2.118-2.538h-1.669c-0.32,0-0.58-0.26-0.58-0.58 c0-0.329,0.26-0.589,0.58-0.589h2.918c0.23,0,0.43,0.13,0.53,0.34c0.03,0.079,0.05,0.159,0.05,0.239c0,0.14-0.04,0.27-0.13,0.38 l-2.118,2.539h1.668C31.322,17.831,31.582,18.091,31.582,18.42z" style="fill:#43AF20;"/></svg></i><span class="reaction-title h6">Sleepy</span></span><span class="reaction-count">0</span></div><div class="reaction" data-reaction="angry"><span class="reaction-content"><i class="reaction-icon"><svg class="svg-icon svg-icon-angry" aria-hidden="true" role="img" focusable="false" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><linearGradient gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" id="svg_angry" x1="306" x2="306" y1="-378.9995" y2="-347"><stop offset="0" style="stop-color:#FFE254"/><stop offset="0.1174" style="stop-color:#FFDC54"/><stop offset="0.2707" style="stop-color:#FECC55"/><stop offset="0.4439" style="stop-color:#FCB156"/><stop offset="0.6318" style="stop-color:#FA8B57"/><stop offset="0.8291" style="stop-color:#F85B59"/><stop offset="1" style="stop-color:#F52C5B"/></linearGradient><circle cx="16" cy="16" r="16" style="fill:url(#svg_angry);"/><circle cx="9.5" cy="19.5" r="1.5" style="fill:#212731;"/><circle cx="22.5" cy="19.5" r="1.5" style="fill:#212731;"/><path d="M5,16c1,1,4.025,3,9,3" style="fill:none;stroke:#212731;stroke-miterlimit:10;"/><path d="M27,16c-1,1-4.025,3-9,3" style="fill:none;stroke:#212731;stroke-miterlimit:10;"/><rect height="1" style="fill:#212731;" width="8" x="12" y="25"/></svg></i><span class="reaction-title h6">Angry</span></span><span class="reaction-count">0</span></div><div class="reaction" data-reaction="dead"><span class="reaction-content"><i class="reaction-icon"><svg class="svg-icon svg-icon-dead" aria-hidden="true" role="img" focusable="false" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><linearGradient gradientUnits="userSpaceOnUse" id="svg_dead" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586"><stop offset="0" style="stop-color:#FFE254"/><stop offset="1" style="stop-color:#FFB255"/></linearGradient><circle cx="16" cy="16" r="16" style="fill:url(#svg_dead);"/><path d="M23,23c0,1.104-0.896,2-2,2H11c-1.104,0-2-0.896-2-2l0,0c0-1.104,0.896-2,2-2h10 C22.104,21,23,21.896,23,23L23,23z" style="fill:#F52C5B;"/><path d="M21,21H11c-1.104,0-2,0.896-2,2s0.896,2,2,2h0.307c0.688-0.581,2.52-1,4.693-1s4.005,0.419,4.693,1 H21c1.104,0,2-0.896,2-2S22.104,21,21,21z" style="fill:#212731;"/><path d="M26.529,12.76l-2.537-1.093C23.993,11.651,24,11.636,24,11.62v-0.24c0-0.016-0.007-0.031-0.008-0.047 l2.537-1.093c0.271-0.08,0.421-0.36,0.341-0.62c-0.08-0.271-0.36-0.41-0.63-0.33l-3.269,1.296l-3.29-1.296 c-0.261-0.08-0.56,0.06-0.64,0.33c-0.08,0.26,0.062,0.54,0.322,0.62l2.638,1.123c0,0.006-0.002,0.011-0.002,0.017v0.24 c0,0.006,0.002,0.011,0.002,0.017l-2.633,1.123c-0.271,0.08-0.414,0.36-0.334,0.62c0.08,0.271,0.374,0.41,0.644,0.33l3.291-1.296 l3.24,1.296c0.261,0.08,0.56-0.06,0.64-0.33C26.93,13.12,26.79,12.84,26.529,12.76z" style="fill:#212731;"/><path d="M12.529,12.76l-2.537-1.093C9.993,11.651,10,11.636,10,11.62v-0.24c0-0.016-0.007-0.031-0.008-0.047 l2.537-1.093c0.271-0.08,0.421-0.36,0.341-0.62c-0.08-0.271-0.36-0.41-0.63-0.33l-3.269,1.296L5.682,9.29 c-0.261-0.08-0.56,0.06-0.64,0.33c-0.08,0.26,0.062,0.54,0.322,0.62l2.638,1.123C8.002,11.369,8,11.374,8,11.38v0.24 c0,0.006,0.002,0.011,0.002,0.017L5.369,12.76c-0.271,0.08-0.414,0.36-0.334,0.62c0.08,0.271,0.374,0.41,0.644,0.33l3.291-1.296 l3.24,1.296c0.261,0.08,0.56-0.06,0.64-0.33C12.93,13.12,12.79,12.84,12.529,12.76z" style="fill:#212731;"/></svg></i><span class="reaction-title h6">Dead</span></span><span class="reaction-count">0</span></div><div class="reaction" data-reaction="wink"><span class="reaction-content"><i class="reaction-icon"><svg class="svg-icon svg-icon-wink" aria-hidden="true" role="img" focusable="false" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><linearGradient gradientUnits="userSpaceOnUse" id="svg_wink" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586"><stop offset="0" style="stop-color:#FFE254"/><stop offset="1" style="stop-color:#FFB255"/></linearGradient><circle cx="16" cy="16" r="16" style="fill:url(#svg_wink);"/><path d="M16,27c6.075,0,11-4.925,11-11H5C5,22.075,9.925,27,16,27z" style="fill:#212731;"/><path d="M10.129,21.975C10.045,22.467,10,22.977,10,23.5c0,4.142,2.686,7.5,6,7.5s6-3.358,6-7.5 c0-0.523-0.045-1.033-0.129-1.525C21.779,21.431,21.203,21,20.651,21h-9.303C10.797,21,10.221,21.431,10.129,21.975z" style="fill:#F52C5B;"/><path d="M6.042,8.62c0.08-0.271,0.38-0.41,0.64-0.33l4.864,1.47C11.816,9.84,12,10.12,12,10.38v0.24 c0,0.26-0.184,0.54-0.454,0.62l-4.867,1.47c-0.27,0.08-0.563-0.06-0.644-0.33c-0.08-0.26,0.063-0.54,0.333-0.62l4.076-1.26 L6.363,9.24C6.103,9.16,5.961,8.88,6.042,8.62z" style="fill:#212731;"/><circle cx="24" cy="11" r="2" style="fill:#212731;"/></svg></i><span class="reaction-title h6">Wink</span></span><span class="reaction-count">0</span></div></aside> </div> </aside> </div> <div class="entry-pagination e-pagi entry-sec mobile-hide"> <div class="inner"> <div class="nav-el nav-left"> <a href="https://worldofsoftware.org/we-need-grocery-stores-pharmacies-more-than-a-quantum-campus-southeast-siders-say/"> <span class="nav-label is-meta"> <i class="rbi rbi-angle-left" aria-hidden="true"></i><span>Previous Article</span> </span> <span class="nav-inner"> <img post-id="761368" fifu-featured="1" width="150" height="150" src="https://cst.brightspotcdn.com/dims4/default/e5baf64/2147483647/strip/true/crop/7008x4000+0+336/resize/1461x834!/quality/90/?url=https%3A%2F%2Fchorus-production-cst-web.s3.us-east-1.amazonaws.com%2Fbrightspot%2Fa6%2F04%2F0760650d4612852bb1790fb4aec1%2Fiqmp-091725.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="We need grocery stores, pharmacies more than a quantum campus, Southeast siders say" title="We need grocery stores, pharmacies more than a quantum campus, Southeast siders say" title="We need grocery stores, pharmacies more than a quantum campus, Southeast siders say" decoding="async" loading="lazy" /> <span class="h4"><span class="p-url">We need grocery stores, pharmacies more than a quantum campus, Southeast siders say</span></span> </span> </a> </div> <div class="nav-el nav-right"> <a href="https://worldofsoftware.org/hiring-a-slip-and-fall-lawyer-avoid-these-7-mistakes/"> <span class="nav-label is-meta"> <span>Next Article</span><i class="rbi rbi-angle-right" aria-hidden="true"></i> </span> <span class="nav-inner"> <img post-id="761374" fifu-featured="1" width="150" height="150" src="https://techbullion.com/wp-content/uploads/2025/09/Screenshot-2025-09-15-201501.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Hiring a Slip and Fall Lawyer: Avoid These 7 Mistakes" title="Hiring a Slip and Fall Lawyer: Avoid These 7 Mistakes" title="Hiring a Slip and Fall Lawyer: Avoid These 7 Mistakes" decoding="async" loading="lazy" /> <span class="h4"><span class="p-url">Hiring a Slip and Fall Lawyer: Avoid These 7 Mistakes</span></span> </span> </a> </div> </div> </div> <div class="comment-box-wrap entry-sec"> <div class="comment-box-header"> <span class="h3"><i class="rbi rbi-comment" aria-hidden="true"></i>Leave a comment</span> </div> <div class="comment-holder no-comment"> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/i-built-a-wordpress-like-hook-system-for-node-js-to-decouple-my-code-hackernoon/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://worldofsoftware.org/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea placeholder="Leave a comment" id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Stay Connected

248.1k Like

69.1k Follow

134k Pin

54.3k Follow

Latest News

The Godot Editor Is Now Available in the Meta Horizon Store | HackerNoon

Computing

Amazon just announced a huge delivery upgrade affecting 2,300 US cities

News

Give your Mac Microsoft’s best tools for under $10 each

News

Why Developers Keep Picking the Wrong Testing Techniques | HackerNoon

Computing