React - DEV Community

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>React - DEV Community</title> <meta name="last-updated" content="2025-04-05 12:55:16 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1743857716"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-b8bdff515245fe895f3035d77697afb35d5d7e114bdf68291667479d4b289751.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-7258612fccf5d56314a6e4ad1898b4f818f474c4bb3485e302428d489a769a17.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-b74902d56433062a87f5f1ce74769baf2a1a698772f46952b0ac72bc95c4abfd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-7dcdad3172ab4501a4598fe8b716c7a88146e79fd42256d36fb1b83e27bf77cf.js"> <link rel="canonical" href="https://dev.to/t/react" /> <meta name="description" content="react content on DEV Community"> <meta name="keywords" content="software development, engineering, react"> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dev.to/t/react" /> <meta property="og:title" content="React" /> <meta property="og:description" content="React content on DEV Community" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@React"> <meta name="twitter:title" content="React"> <meta name="twitter:description" content="React content on DEV Community"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2025-04-04T21:14:30Z" data-latest-commit-id="80dddae49850f88ae36ea53ef7b4cd07bd8b133e" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-dynamic-url-component="bmar11" data-ga4-tracking-id="G-TYEM8Y3JN3"> <script> if (navigator.userAgent === 'ForemWebView/1' || window.frameElement) { document.body.classList.add("hidden-shell"); } </script> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="abu88ndqkveu0o0ru4flxut3yba8z1cb" class="crayons-icon"><title id="abu88ndqkveu0o0ru4flxut3yba8z1cb">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1fxtt598l7kaifbz1bzxlxmmb429mkz" aria-hidden="true" class="crayons-icon"><title id="a1fxtt598l7kaifbz1bzxlxmmb429mkz">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a1tzkz3zrumtx042ds0sdwj7tr0e9ml9" aria-hidden="true" class="crayons-icon"><title id="a1tzkz3zrumtx042ds0sdwj7tr0e9ml9">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="https://dev.to/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="https://dev.to/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a9vrq23r5prbq62wis3yj0tl5bwibeej" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a9vrq23r5prbq62wis3yj0tl5bwibeej">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper tagged_articles tagged_articles-index" data-current-page="tagged_articles-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <div data-tag-id="125" data-tag-name="react" id="tag-125" class="crayons-layout js-tag-card"> <header class="crayons-card branded-4 p-4 l:p-6 spec__tag-header" style="border-top-color: #222222 "> <div class="flex"> <img src="https://media2.dev.to/dynamic/image/width=64,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F26%2Freact-sticker.png" alt="" class="mr-4" style="transform: rotate(0deg); width: 64px; height: 64px;" /> <div class="flex flex-col w-100 justify-center"> <div class="flex justify-between items-center"> <h1 class="crayons-title"> React </h1> <div id="tag-buttons-125" class="mt-auto flex items-end justify-between"> <div class="flex gap-2"> <button class="c-btn c-btn--primary js-follow-tag-button" aria-label="Follow tag: react"> Follow </button> <button class="c-btn js-hide-tag-button" aria-label="Hide tag: react"> Hide </button> </div> </div> </div> <p class="max-w-100 m:max-w-75 pt-2 s:pt-4"> Official tag for Facebook's React JavaScript library for building user interfaces </p> </div> </div> </header> </div> <div class="home sub-home" id="index-container" data-params="{"tag":"react","sort_by":"hotness_score","sort_direction":"desc"}" data-which="" data-tag="react" data-feed="base-feed" data-requires-approval="false" data-articles-since=""> <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left"> <div class="sidebar-bg" id="sidebar-bg-left"></div> <aside class="side-bar"> <div class="widget js-policy-article-create"> <a class="crayons-btn crayons-btn--s" href="/new/react"> Create Post </a> </div> <div class="widget"> <header> <h4>submission guidelines</h4> </header> <div class="widget-body"> <p>1️⃣ Post Facebook's React ⚛ related posts/questions/discussion topics here~</p> <p>2️⃣ There are no silly posts or questions as we all learn from each other👩‍🎓👨‍🎓</p> <p>3️⃣ Adhere to dev.to 👩‍💻👨‍💻<a href="https://dev.to/code-of-conduct">Code of Conduct</a></p> </div> </div> <div class="widget"> <header> <h4>about #react</h4> </header> <div class="widget-body"> <p><a href="https://reactjs.org/">React</a> is a declarative, component-based library, you can learn once, and write anywhere</p> <p><strong>Editor Guide</strong></p> <p>Check out this <a href="https://dev.to/p/editor_guide">Editor Guide</a><br> or <a href="https://dev.to/hoverbaum/how-to-add-code-highlighting-to-your-devto-posts-2lp6">this post</a> to learn how to add code syntax highlights, embed CodeSandbox/Codepen, etc</p> <p><strong>Official Documentations & Source</strong></p> <ul> <li><a href="https://reactjs.org/">Docs</a></li> <li><a href="https://reactjs.org/docs/getting-started.html">Tutorial</a></li> <li><a href="https://reactjs.org/community/support.html">Community</a></li> <li><a href="https://reactjs.org/blog/2019/02/06/react-v16.8.0.html">Blog</a></li> <li> <a href="https://github.com/facebook/react/">Source code</a> on GitHub</li> </ul> <p><strong>Improving Your Chances for a Reply</strong></p> <p>by putting a minimal example to either <a href="https://jsfiddle.net/Luktwrdm/">JSFiddle</a>, <a href="https://codesandbox.io/s/new">Code Sandbox</a>, or <a href="https://stackblitz.com/">StackBlitz</a>. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!</p> <p><strong>Where else to ask questions</strong></p> <ul> <li> <a href="https://stackoverflow.com/questions/tagged/reactjs">StackOverflow tagged with [reactjs]</a> <a href="https://www.reddit.com/r/reactjs/comments/eictui/beginners_thread_easy_questions_jan_2020/">Beginner's Thread / Easy Questions (Jan 2020)</a> on <a href="https://www.reddit.com/r/reactjs">r/reactjs</a> subreddit.</li> </ul> <p><em>Note: a new "Beginner's Thread" created as sticky post on the first day of each month</em></p> <p><strong>Learn in Public</strong></p> <p>Don't afraid to post an article or being wrong.<br> <a href="https://www.swyx.io/writing/learn-in-public/">Learn in public</a>.</p> </div> </div> <div class="sidebar-data"> <div> 40366 Posts Published </div> <hr /> <div class="olderposts-header">Older #react posts</div> <div class="olderposts-links"> <span class="olderposts-pagenumber">1</span> <a href="https://dev.to/t/react/page/2" class="olderposts-pagenumber">2</a> <a href="https://dev.to/t/react/page/3" class="olderposts-pagenumber">3</a> <a href="https://dev.to/t/react/page/4" class="olderposts-pagenumber">4</a> <a href="https://dev.to/t/react/page/5" class="olderposts-pagenumber">5</a> <a href="https://dev.to/t/react/page/6" class="olderposts-pagenumber">6</a> <a href="https://dev.to/t/react/page/7" class="olderposts-pagenumber">7</a> <a href="https://dev.to/t/react/page/8" class="olderposts-pagenumber">8</a> <a href="https://dev.to/t/react/page/9" class="olderposts-pagenumber">9</a> <div> …<a href="https://dev.to/t/react/page/75" class="olderposts-pagenumber">75</a> …<a href="https://dev.to/t/react/page/1614" class="olderposts-pagenumber">1614</a> </div> </div> </div> </aside> </div> <main class="articles-list" id="main-content" data-follow-button-container="true"> <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls"> <h1 class="screen-reader-only">Posts</h1> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden mb-auto" id="on-page-nav-butt-left" aria-label="nav-button-left"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a21hbv2jpktw7chytd7g2y8goaload7h" class="crayons-icon"><title id="a21hbv2jpktw7chytd7g2y8goaload7h">Left menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> <div class="flex-1 flex items-center justify-between"> <div class="crayons-notice w-100" aria-live="polite">👋 <a href="/enter">Sign in</a> for the ability to sort posts by <strong>relevant</strong>, <strong>latest</strong>, or <strong>top</strong>.</div> </div> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden mb-auto" id="on-page-nav-butt-right" aria-label="nav-button-right"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a96qf6b7or5s8xok8tsphqvalurdwmlb" class="crayons-icon"><title id="a96qf6b7or5s8xok8tsphqvalurdwmlb">Right menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> </header> <div class="substories" id="substories"> <div class="crayons-story " data-feed-content-id="2384041" data-content-user-id="1099798"> <a href="https://dev.to/devshefali/react-context-api-the-best-way-to-manage-global-state-531n" aria-labelledby="article-link-2384041" class="crayons-story__hidden-navigation-link">React Context API: The Best Way to Manage Global State?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/devshefali" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1099798%2F91a738ed-d56e-4502-bd61-d98ca1b741bb.jpg" alt="devshefali profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/devshefali" class="crayons-story__secondary fw-medium m:hidden"> Shefali </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2384041" aria-controls="story-author-preview-content-2384041" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Shefali profile details"> Shefali </button> <div id="story-author-preview-content-2384041" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/devshefali" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1099798%2F91a738ed-d56e-4502-bd61-d98ca1b741bb.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Shefali</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1099798,"className":"User","name":"Shefali"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1099798"></div> </div> </div> </div> </div> <a href="https://dev.to/devshefali/react-context-api-the-best-way-to-manage-global-state-531n" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T12:19:09Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743855549"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/devshefali/react-context-api-the-best-way-to-manage-global-state-531n" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmiaj3f7dnodlaf0un3vu.png" id="article-link-2384041"> React Context API: The Best Way to Manage Global State? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/devshefali/react-context-api-the-best-way-to-manage-global-state-531n#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React Context API: The Best Way to Manage Global State?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aewdzur0fqim9uioapxpsi4ciudlwi28" class="crayons-icon"><title id="aewdzur0fqim9uioapxpsi4ciudlwi28">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> <button type="button" id="article-save-button-2384041" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2384041" data-article-author-id="1099798" aria-label="Save post React Context API: The Best Way to Manage Global State? to reading list" title="Save post React Context API: The Best Way to Manage Global State? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2383881" data-content-user-id="3019844"> <a href="https://dev.to/prashantrathi123/hawkclient-a-developer-and-git-friendly-api-client-postman-alternative-1gm4" aria-labelledby="article-link-2383881" class="crayons-story__hidden-navigation-link">HawkClient: A developer and git friendly API client (postman alternative)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/prashantrathi123" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3019844%2Fafc21f31-aa46-4703-b766-eb7e1f88711a.jpeg" alt="prashantrathi123 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/prashantrathi123" class="crayons-story__secondary fw-medium m:hidden"> prashant rathi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2383881" aria-controls="story-author-preview-content-2383881" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="prashant rathi profile details"> prashant rathi </button> <div id="story-author-preview-content-2383881" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/prashantrathi123" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3019844%2Fafc21f31-aa46-4703-b766-eb7e1f88711a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">prashant rathi</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":3019844,"className":"User","name":"prashant rathi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="3019844"></div> </div> </div> </div> </div> <a href="https://dev.to/prashantrathi123/hawkclient-a-developer-and-git-friendly-api-client-postman-alternative-1gm4" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T10:55:38Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743850538"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/prashantrathi123/hawkclient-a-developer-and-git-friendly-api-client-postman-alternative-1gm4" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F54epqcqsi6or33uzqfcm.png" id="article-link-2383881"> HawkClient: A developer and git friendly API client (postman alternative) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(151, 37, 234, 0.10); --tag-prefix: #9725ea; --tag-bg-hover: rgba(151, 37, 234, 0.10); --tag-prefix-hover: #9725ea; " href="/t/api"><span class="crayons-tag__prefix">#</span>api</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/rest"><span class="crayons-tag__prefix">#</span>rest</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/prashantrathi123/hawkclient-a-developer-and-git-friendly-api-client-postman-alternative-1gm4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - HawkClient: A developer and git friendly API client (postman alternative)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ariyku33755e2tynnibwjigapi573bfb" class="crayons-icon"><title id="ariyku33755e2tynnibwjigapi573bfb">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2383881" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2383881" data-article-author-id="3019844" aria-label="Save post HawkClient: A developer and git friendly API client (postman alternative) to reading list" title="Save post HawkClient: A developer and git friendly API client (postman alternative) to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2375394" data-content-user-id="241004"> <a href="https://dev.to/dmnchzl/this-is-tuple-context-pattern-1pac" aria-labelledby="article-link-2375394" class="crayons-story__hidden-navigation-link">This Is Tuple Context Pattern</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dmnchzl" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F241004%2Fe0e0197f-1d57-46e7-85dc-652c77229b9b.jpg" alt="dmnchzl profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dmnchzl" class="crayons-story__secondary fw-medium m:hidden"> Damien Chazoule </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2375394" aria-controls="story-author-preview-content-2375394" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Damien Chazoule profile details"> Damien Chazoule </button> <div id="story-author-preview-content-2375394" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dmnchzl" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F241004%2Fe0e0197f-1d57-46e7-85dc-652c77229b9b.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Damien Chazoule</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":241004,"className":"User","name":"Damien Chazoule"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="241004"></div> </div> </div> </div> </div> <a href="https://dev.to/dmnchzl/this-is-tuple-context-pattern-1pac" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T07:31:04Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743838264"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dmnchzl/this-is-tuple-context-pattern-1pac" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyojb206ad074m7o9l26i.png" id="article-link-2375394"> This Is Tuple Context Pattern </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dmnchzl/this-is-tuple-context-pattern-1pac#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - This Is Tuple Context Pattern"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ano0egmwe6er0o4rirzg0f8izi0r6ile" class="crayons-icon"><title id="ano0egmwe6er0o4rirzg0f8izi0r6ile">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> <button type="button" id="article-save-button-2375394" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2375394" data-article-author-id="241004" aria-label="Save post This Is Tuple Context Pattern to reading list" title="Save post This Is Tuple Context Pattern to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2382865" data-content-user-id="2996659"> <a href="https://dev.to/ficav/building-an-ai-powered-erase-and-replace-image-tool-with-nextjs-and-react-5ae0" aria-labelledby="article-link-2382865" class="crayons-story__hidden-navigation-link">Building an AI-Powered 'Erase and Replace' Image Tool with Next.js and React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ficav" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2996659%2F3b9a3d8d-2a20-4301-a5f5-df3b832774e8.png" alt="ficav profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ficav" class="crayons-story__secondary fw-medium m:hidden"> ficav </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2382865" aria-controls="story-author-preview-content-2382865" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="ficav profile details"> ficav </button> <div id="story-author-preview-content-2382865" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ficav" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2996659%2F3b9a3d8d-2a20-4301-a5f5-df3b832774e8.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">ficav</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2996659,"className":"User","name":"ficav"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2996659"></div> </div> </div> </div> </div> <a href="https://dev.to/ficav/building-an-ai-powered-erase-and-replace-image-tool-with-nextjs-and-react-5ae0" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T03:18:21Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743823101"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ficav/building-an-ai-powered-erase-and-replace-image-tool-with-nextjs-and-react-5ae0" data-preload-image="" id="article-link-2382865"> Building an AI-Powered 'Erase and Replace' Image Tool with Next.js and React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/ficav/building-an-ai-powered-erase-and-replace-image-tool-with-nextjs-and-react-5ae0" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2382865" aria-label="Add a comment to post - Building an AI-Powered 'Erase and Replace' Image Tool with Next.js and React"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/ficav/building-an-ai-powered-erase-and-replace-image-tool-with-nextjs-and-react-5ae0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building an AI-Powered 'Erase and Replace' Image Tool with Next.js and React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahc2yi8jrjmfqcfc4dh3d8pg7a94yesn" class="crayons-icon"><title id="ahc2yi8jrjmfqcfc4dh3d8pg7a94yesn">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2382865" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2382865" data-article-author-id="2996659" aria-label="Save post Building an AI-Powered 'Erase and Replace' Image Tool with Next.js and React to reading list" title="Save post Building an AI-Powered 'Erase and Replace' Image Tool with Next.js and React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2382720" data-content-user-id="1195017"> <a href="https://dev.to/pixelcharmer/react-js-trying-to-create-a-solid-line-with-the-node-connectors-33c8" aria-labelledby="article-link-2382720" class="crayons-story__hidden-navigation-link">React JS - trying to create a solid line with the node connectors</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/pixelcharmer" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1195017%2F272837a8-0f95-4222-9d65-ca17e69d24a0.png" alt="pixelcharmer profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/pixelcharmer" class="crayons-story__secondary fw-medium m:hidden"> PixelCharmer </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2382720" aria-controls="story-author-preview-content-2382720" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="PixelCharmer profile details"> PixelCharmer </button> <div id="story-author-preview-content-2382720" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/pixelcharmer" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1195017%2F272837a8-0f95-4222-9d65-ca17e69d24a0.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">PixelCharmer</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1195017,"className":"User","name":"PixelCharmer"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1195017"></div> </div> </div> </div> </div> <a href="https://dev.to/pixelcharmer/react-js-trying-to-create-a-solid-line-with-the-node-connectors-33c8" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T01:38:23Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743817103"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/pixelcharmer/react-js-trying-to-create-a-solid-line-with-the-node-connectors-33c8" data-preload-image="" id="article-link-2382720"> React JS - trying to create a solid line with the node connectors </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(255, 50, 50, 0.10); --tag-prefix: #ff3232; --tag-bg-hover: rgba(255, 50, 50, 0.10); --tag-prefix-hover: #ff3232; " href="/t/help"><span class="crayons-tag__prefix">#</span>help</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/github"><span class="crayons-tag__prefix">#</span>github</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/pixelcharmer/react-js-trying-to-create-a-solid-line-with-the-node-connectors-33c8#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React JS - trying to create a solid line with the node connectors"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afnnkemc56a4mnwwov7knwbhnn1q1r6v" class="crayons-icon"><title id="afnnkemc56a4mnwwov7knwbhnn1q1r6v">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2382720" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2382720" data-article-author-id="1195017" aria-label="Save post React JS - trying to create a solid line with the node connectors to reading list" title="Save post React JS - trying to create a solid line with the node connectors to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2382305" data-content-user-id="1101692"> <a href="https://dev.to/ivan_kaminskyi/what-everyones-missing-about-reacts-usedeferredvalue-hook-11p5" aria-labelledby="article-link-2382305" class="crayons-story__hidden-navigation-link">What Everyone’s Missing About React’s useDeferredValue Hook</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ivan_kaminskyi" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1101692%2Fb20919aa-c0fa-4d48-822f-f469a4ba7902.png" alt="ivan_kaminskyi profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ivan_kaminskyi" class="crayons-story__secondary fw-medium m:hidden"> Ivan Kaminskyi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2382305" aria-controls="story-author-preview-content-2382305" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ivan Kaminskyi profile details"> Ivan Kaminskyi </button> <div id="story-author-preview-content-2382305" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ivan_kaminskyi" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1101692%2Fb20919aa-c0fa-4d48-822f-f469a4ba7902.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ivan Kaminskyi</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1101692,"className":"User","name":"Ivan Kaminskyi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1101692"></div> </div> </div> </div> </div> <a href="https://dev.to/ivan_kaminskyi/what-everyones-missing-about-reacts-usedeferredvalue-hook-11p5" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T21:42:00Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743802920"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ivan_kaminskyi/what-everyones-missing-about-reacts-usedeferredvalue-hook-11p5" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn2n8v4amk6rhjqq67gig.png" id="article-link-2382305"> What Everyone’s Missing About React’s useDeferredValue Hook </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/ivan_kaminskyi/what-everyones-missing-about-reacts-usedeferredvalue-hook-11p5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What Everyone’s Missing About React’s useDeferredValue Hook"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aldbrdrmpz8ly55aqg6qceclp00mnh17" class="crayons-icon"><title id="aldbrdrmpz8ly55aqg6qceclp00mnh17">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2382305" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2382305" data-article-author-id="1101692" aria-label="Save post What Everyone’s Missing About React’s useDeferredValue Hook to reading list" title="Save post What Everyone’s Missing About React’s useDeferredValue Hook to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2382158" data-content-user-id="1271240"> <a href="https://dev.to/mazzaracm/-41je" aria-labelledby="article-link-2382158" class="crayons-story__hidden-navigation-link">𝗦𝗰𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲: 𝗘𝗹𝗲𝘃𝗮𝘁𝗶𝗻𝗴 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/mazzaracm" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1271240%2F2e66fb60-e679-4614-9bd8-59bbef368e04.jpeg" alt="mazzaracm profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/mazzaracm" class="crayons-story__secondary fw-medium m:hidden"> Chris </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2382158" aria-controls="story-author-preview-content-2382158" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Chris profile details"> Chris </button> <div id="story-author-preview-content-2382158" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/mazzaracm" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1271240%2F2e66fb60-e679-4614-9bd8-59bbef368e04.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Chris</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1271240,"className":"User","name":"Chris"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1271240"></div> </div> </div> </div> </div> <a href="https://dev.to/mazzaracm/-41je" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T20:24:36Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743798276"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/mazzaracm/-41je" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1gtpictvueavmt5d3j63.png" id="article-link-2382158"> 𝗦𝗰𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲: 𝗘𝗹𝗲𝘃𝗮𝘁𝗶𝗻𝗴 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(235, 223, 55, 0.10); --tag-prefix: #ebdf37; --tag-bg-hover: rgba(235, 223, 55, 0.10); --tag-prefix-hover: #ebdf37; " href="/t/architecture"><span class="crayons-tag__prefix">#</span>architecture</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/datastructures"><span class="crayons-tag__prefix">#</span>datastructures</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/mazzaracm/-41je#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 𝗦𝗰𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲: 𝗘𝗹𝗲𝘃𝗮𝘁𝗶𝗻𝗴 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="avxn4be3syrkytd81qg69df7ocd9zao" class="crayons-icon"><title id="avxn4be3syrkytd81qg69df7ocd9zao">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2382158" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2382158" data-article-author-id="1271240" aria-label="Save post 𝗦𝗰𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲: 𝗘𝗹𝗲𝘃𝗮𝘁𝗶𝗻𝗴 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 to reading list" title="Save post 𝗦𝗰𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲: 𝗘𝗹𝗲𝘃𝗮𝘁𝗶𝗻𝗴 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2381915" data-content-user-id="734666"> <a href="https://dev.to/franciscomoretti/what-tests-to-write-for-react-56ki" aria-labelledby="article-link-2381915" class="crayons-story__hidden-navigation-link">What tests to write for React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/franciscomoretti" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F734666%2F0e082ef5-cd71-41df-9f78-9eb2b9aafeb9.png" alt="franciscomoretti profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/franciscomoretti" class="crayons-story__secondary fw-medium m:hidden"> Francisco Moretti </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2381915" aria-controls="story-author-preview-content-2381915" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Francisco Moretti profile details"> Francisco Moretti </button> <div id="story-author-preview-content-2381915" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/franciscomoretti" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F734666%2F0e082ef5-cd71-41df-9f78-9eb2b9aafeb9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Francisco Moretti</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":734666,"className":"User","name":"Francisco Moretti"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="734666"></div> </div> </div> </div> </div> <a href="https://dev.to/franciscomoretti/what-tests-to-write-for-react-56ki" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T19:06:11Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743793571"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/franciscomoretti/what-tests-to-write-for-react-56ki" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fwww.franciscomoretti.com%2Fthumbnails%2Fwhat-tests-to-write-for-react.jpg" id="article-link-2381915"> What tests to write for React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(1, 155, 101, 0.10); --tag-prefix: #019b65; --tag-bg-hover: rgba(1, 155, 101, 0.10); --tag-prefix-hover: #019b65; " href="/t/testing"><span class="crayons-tag__prefix">#</span>testing</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/bestpractices"><span class="crayons-tag__prefix">#</span>bestpractices</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/franciscomoretti/what-tests-to-write-for-react-56ki#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What tests to write for React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aosi9802nyhtt52ncemtat3wzy7e36y9" class="crayons-icon"><title id="aosi9802nyhtt52ncemtat3wzy7e36y9">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> <button type="button" id="article-save-button-2381915" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2381915" data-article-author-id="734666" aria-label="Save post What tests to write for React to reading list" title="Save post What tests to write for React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="1950437" data-content-user-id="1102248"> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" aria-labelledby="article-link-1950437" class="crayons-story__hidden-navigation-link">Estrutura do projeto React para escalar: decomposition, camadas e hierarquia</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dougsource" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" alt="dougsource profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dougsource" class="crayons-story__secondary fw-medium m:hidden"> doug-source </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-1950437" aria-controls="story-author-preview-content-1950437" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="doug-source profile details"> doug-source </button> <div id="story-author-preview-content-1950437" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dougsource" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1102248%2Ff132f017-d2ab-4bd0-9bce-1fea180a0cc1.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">doug-source</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1102248,"className":"User","name":"doug-source"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1102248"></div> </div> </div> </div> </div> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T01:51:44Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743817904"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" data-preload-image="" id="article-link-1950437"> Estrutura do projeto React para escalar: decomposition, camadas e hierarquia </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(235, 223, 55, 0.10); --tag-prefix: #ebdf37; --tag-bg-hover: rgba(235, 223, 55, 0.10); --tag-prefix-hover: #ebdf37; " href="/t/architecture"><span class="crayons-tag__prefix">#</span>architecture</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(205, 205, 0, 0.10); --tag-prefix: #cdcd00; --tag-bg-hover: rgba(205, 205, 0, 0.10); --tag-prefix-hover: #cdcd00; " href="/t/braziliandevs"><span class="crayons-tag__prefix">#</span>braziliandevs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="1950437" aria-label="Add a comment to post - Estrutura do projeto React para escalar: decomposition, camadas e hierarquia"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/dougsource/estrutura-do-projeto-react-para-escalar-decomposition-camadas-e-hierarquia-1kdh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Estrutura do projeto React para escalar: decomposition, camadas e hierarquia"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5d3xtpnauf6zkjzvd6suef4n4c3n1ur" class="crayons-icon"><title id="a5d3xtpnauf6zkjzvd6suef4n4c3n1ur">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 21 min read </small> <button type="button" id="article-save-button-1950437" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="1950437" data-article-author-id="1102248" aria-label="Save post Estrutura do projeto React para escalar: decomposition, camadas e hierarquia to reading list" title="Save post Estrutura do projeto React para escalar: decomposition, camadas e hierarquia to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2381597" data-content-user-id="3016941"> <a href="https://dev.to/ih_sajjad/how-i-built-an-hsc-gpa-calculator-for-bangladeshi-students-using-nextjs-253j" aria-labelledby="article-link-2381597" class="crayons-story__hidden-navigation-link">How I Built an HSC GPA Calculator for Bangladeshi Students Using Next.js</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ih_sajjad" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3016941%2Fc227a820-81ed-47b7-8ff0-79187fc537cb.png" alt="ih_sajjad profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ih_sajjad" class="crayons-story__secondary fw-medium m:hidden"> IH Sajjad </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2381597" aria-controls="story-author-preview-content-2381597" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="IH Sajjad profile details"> IH Sajjad </button> <div id="story-author-preview-content-2381597" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ih_sajjad" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3016941%2Fc227a820-81ed-47b7-8ff0-79187fc537cb.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">IH Sajjad</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":3016941,"className":"User","name":"IH Sajjad"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="3016941"></div> </div> </div> </div> </div> <a href="https://dev.to/ih_sajjad/how-i-built-an-hsc-gpa-calculator-for-bangladeshi-students-using-nextjs-253j" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T16:45:12Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743785112"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ih_sajjad/how-i-built-an-hsc-gpa-calculator-for-bangladeshi-students-using-nextjs-253j" data-preload-image="" id="article-link-2381597"> How I Built an HSC GPA Calculator for Bangladeshi Students Using Next.js </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/ih_sajjad/how-i-built-an-hsc-gpa-calculator-for-bangladeshi-students-using-nextjs-253j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How I Built an HSC GPA Calculator for Bangladeshi Students Using Next.js"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8l9ufznvew5t0r4vmcqonyfys9u6pz5" class="crayons-icon"><title id="a8l9ufznvew5t0r4vmcqonyfys9u6pz5">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2381597" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2381597" data-article-author-id="3016941" aria-label="Save post How I Built an HSC GPA Calculator for Bangladeshi Students Using Next.js to reading list" title="Save post How I Built an HSC GPA Calculator for Bangladeshi Students Using Next.js to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2381574" data-content-user-id="1171637"> <a href="https://dev.to/propelauth/understanding-hydration-errors-by-building-a-ssr-react-project-51i6" aria-labelledby="article-link-2381574" class="crayons-story__hidden-navigation-link">Understanding Hydration Errors by building a SSR React Project</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/propelauth"> <img alt="PropelAuth logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F4891%2Fa6b9a3ea-dd04-4e66-ba1b-4b4dcb152d7e.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/victoria_propel" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1171637%2Fd660c3c6-64dc-429e-a14c-3cf2ca34ec43.jpeg" alt="victoria_propel profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/victoria_propel" class="crayons-story__secondary fw-medium m:hidden"> Victoria </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2381574" aria-controls="story-author-preview-content-2381574" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Victoria profile details"> Victoria </button> <div id="story-author-preview-content-2381574" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/victoria_propel" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1171637%2Fd660c3c6-64dc-429e-a14c-3cf2ca34ec43.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Victoria</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1171637,"className":"User","name":"Victoria"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1171637"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/propelauth" class="crayons-story__secondary fw-medium">PropelAuth</a> </span> </div> <a href="https://dev.to/propelauth/understanding-hydration-errors-by-building-a-ssr-react-project-51i6" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T16:36:41Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743784601"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/propelauth/understanding-hydration-errors-by-building-a-ssr-react-project-51i6" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fim7g2intdvm6qkixd8tn.png" id="article-link-2381574"> Understanding Hydration Errors by building a SSR React Project </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/propelauth/understanding-hydration-errors-by-building-a-ssr-react-project-51i6#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Understanding Hydration Errors by building a SSR React Project"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8ycn4jrlvmncs8pcehhjlvs6zifvvpb" class="crayons-icon"><title id="a8ycn4jrlvmncs8pcehhjlvs6zifvvpb">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> <button type="button" id="article-save-button-2381574" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2381574" data-article-author-id="1171637" aria-label="Save post Understanding Hydration Errors by building a SSR React Project to reading list" title="Save post Understanding Hydration Errors by building a SSR React Project to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2381402" data-content-user-id="2992386"> <a href="https://dev.to/probir-sarkar/10-most-hyped-react-libraries-and-frameworks-of-2025-1k15" aria-labelledby="article-link-2381402" class="crayons-story__hidden-navigation-link">10 Most Hyped React Libraries and Frameworks of 2025</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/probir-sarkar" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2992386%2Ffb259780-c0a6-48dd-ba2a-6a5eb04d9958.jpg" alt="probir-sarkar profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/probir-sarkar" class="crayons-story__secondary fw-medium m:hidden"> Probir Sarkar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2381402" aria-controls="story-author-preview-content-2381402" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Probir Sarkar profile details"> Probir Sarkar </button> <div id="story-author-preview-content-2381402" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/probir-sarkar" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2992386%2Ffb259780-c0a6-48dd-ba2a-6a5eb04d9958.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Probir Sarkar</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2992386,"className":"User","name":"Probir Sarkar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2992386"></div> </div> </div> </div> </div> <a href="https://dev.to/probir-sarkar/10-most-hyped-react-libraries-and-frameworks-of-2025-1k15" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T15:12:48Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743779568"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/probir-sarkar/10-most-hyped-react-libraries-and-frameworks-of-2025-1k15" data-preload-image="" id="article-link-2381402"> 10 Most Hyped React Libraries and Frameworks of 2025 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/probir-sarkar/10-most-hyped-react-libraries-and-frameworks-of-2025-1k15#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Most Hyped React Libraries and Frameworks of 2025"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ao89av69lm0m56cdms5x2ejepw2ldct0" class="crayons-icon"><title id="ao89av69lm0m56cdms5x2ejepw2ldct0">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> <button type="button" id="article-save-button-2381402" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2381402" data-article-author-id="2992386" aria-label="Save post 10 Most Hyped React Libraries and Frameworks of 2025 to reading list" title="Save post 10 Most Hyped React Libraries and Frameworks of 2025 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2380869" data-content-user-id="1075062"> <a href="https://dev.to/isumix/almost-vanilla-frontend-4i1a" aria-labelledby="article-link-2380869" class="crayons-story__hidden-navigation-link">Almost Vanilla Frontend</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/isumix" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1075062%2F633cf29b-606e-4787-9150-22ffb446e8a0.jpg" alt="isumix profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/isumix" class="crayons-story__secondary fw-medium m:hidden"> Igor Sukharev </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2380869" aria-controls="story-author-preview-content-2380869" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Igor Sukharev profile details"> Igor Sukharev </button> <div id="story-author-preview-content-2380869" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/isumix" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1075062%2F633cf29b-606e-4787-9150-22ffb446e8a0.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Igor Sukharev</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1075062,"className":"User","name":"Igor Sukharev"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1075062"></div> </div> </div> </div> </div> <a href="https://dev.to/isumix/almost-vanilla-frontend-4i1a" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T11:35:50Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743766550"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/isumix/almost-vanilla-frontend-4i1a" data-preload-image="" id="article-link-2380869"> Almost Vanilla Frontend </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(44, 79, 124, 0.10); --tag-prefix: #2c4f7c; --tag-bg-hover: rgba(44, 79, 124, 0.10); --tag-prefix-hover: #2c4f7c; " href="/t/solidjs"><span class="crayons-tag__prefix">#</span>solidjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/isumix/almost-vanilla-frontend-4i1a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Almost Vanilla Frontend"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ategkjf6zwosq3x00xztiiq9zake6c88" class="crayons-icon"><title id="ategkjf6zwosq3x00xztiiq9zake6c88">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> <button type="button" id="article-save-button-2380869" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2380869" data-article-author-id="1075062" aria-label="Save post Almost Vanilla Frontend to reading list" title="Save post Almost Vanilla Frontend to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2381803" data-content-user-id="2993928"> <a href="https://dev.to/talhabilaldev/portfolio-update-blog-performance-and-tech-stack-overhaul-2787" aria-labelledby="article-link-2381803" class="crayons-story__hidden-navigation-link">🚀 Portfolio Update: Blog, Performance, and Tech Stack Overhaul! 🚀</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/talhabilaldev" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2993928%2F9ba60e18-9c9a-42c6-8904-586094f69724.jpeg" alt="talhabilaldev profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/talhabilaldev" class="crayons-story__secondary fw-medium m:hidden"> Talha Bilal </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2381803" aria-controls="story-author-preview-content-2381803" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Talha Bilal profile details"> Talha Bilal </button> <div id="story-author-preview-content-2381803" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/talhabilaldev" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2993928%2F9ba60e18-9c9a-42c6-8904-586094f69724.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Talha Bilal</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2993928,"className":"User","name":"Talha Bilal"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2993928"></div> </div> </div> </div> </div> <a href="https://dev.to/talhabilaldev/portfolio-update-blog-performance-and-tech-stack-overhaul-2787" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T18:12:45Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743790365"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/talhabilaldev/portfolio-update-blog-performance-and-tech-stack-overhaul-2787" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ddv8helc5zgic76cuyv.png" id="article-link-2381803"> 🚀 Portfolio Update: Blog, Performance, and Tech Stack Overhaul! 🚀 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/talhabilaldev/portfolio-update-blog-performance-and-tech-stack-overhaul-2787" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2381803" aria-label="Add a comment to post - 🚀 Portfolio Update: Blog, Performance, and Tech Stack Overhaul! 🚀"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/talhabilaldev/portfolio-update-blog-performance-and-tech-stack-overhaul-2787#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🚀 Portfolio Update: Blog, Performance, and Tech Stack Overhaul! 🚀"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alkqxyemo724btr9f44ukd8u4lartzem" class="crayons-icon"><title id="alkqxyemo724btr9f44ukd8u4lartzem">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2381803" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2381803" data-article-author-id="2993928" aria-label="Save post 🚀 Portfolio Update: Blog, Performance, and Tech Stack Overhaul! 🚀 to reading list" title="Save post 🚀 Portfolio Update: Blog, Performance, and Tech Stack Overhaul! 🚀 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2380722" data-content-user-id="2146645"> <a href="https://dev.to/somerset/reactjs-in-2025-what-every-business-needs-to-know-586e" aria-labelledby="article-link-2380722" class="crayons-story__hidden-navigation-link">ReactJS in 2025: What Every Business Needs to Know</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/somerset" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2146645%2F0b807c8c-c120-4c8f-bcd4-35be4a77b4c0.png" alt="somerset profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/somerset" class="crayons-story__secondary fw-medium m:hidden"> Tony </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2380722" aria-controls="story-author-preview-content-2380722" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Tony profile details"> Tony </button> <div id="story-author-preview-content-2380722" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/somerset" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2146645%2F0b807c8c-c120-4c8f-bcd4-35be4a77b4c0.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Tony</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2146645,"className":"User","name":"Tony"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2146645"></div> </div> </div> </div> </div> <a href="https://dev.to/somerset/reactjs-in-2025-what-every-business-needs-to-know-586e" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T10:27:56Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743762476"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/somerset/reactjs-in-2025-what-every-business-needs-to-know-586e" data-preload-image="" id="article-link-2380722"> ReactJS in 2025: What Every Business Needs to Know </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/somerset/reactjs-in-2025-what-every-business-needs-to-know-586e" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2380722" aria-label="Add a comment to post - ReactJS in 2025: What Every Business Needs to Know"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/somerset/reactjs-in-2025-what-every-business-needs-to-know-586e#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - ReactJS in 2025: What Every Business Needs to Know"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="athwq4m3e7sd7mcy17vqo0plijb29mz7" class="crayons-icon"><title id="athwq4m3e7sd7mcy17vqo0plijb29mz7">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 12 min read </small> <button type="button" id="article-save-button-2380722" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2380722" data-article-author-id="2146645" aria-label="Save post ReactJS in 2025: What Every Business Needs to Know to reading list" title="Save post ReactJS in 2025: What Every Business Needs to Know to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2380193" data-content-user-id="753450"> <a href="https://dev.to/hasunnilupul/how-to-build-a-custom-hook-in-react-1d57" aria-labelledby="article-link-2380193" class="crayons-story__hidden-navigation-link">🧩 How to Build a Custom Hook in React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/hasunnilupul" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F753450%2Fada74e63-208b-4426-aa92-70d85f23a880.jpg" alt="hasunnilupul profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/hasunnilupul" class="crayons-story__secondary fw-medium m:hidden"> Nilupul Perera </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2380193" aria-controls="story-author-preview-content-2380193" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nilupul Perera profile details"> Nilupul Perera </button> <div id="story-author-preview-content-2380193" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/hasunnilupul" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F753450%2Fada74e63-208b-4426-aa92-70d85f23a880.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nilupul Perera</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":753450,"className":"User","name":"Nilupul Perera"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="753450"></div> </div> </div> </div> </div> <a href="https://dev.to/hasunnilupul/how-to-build-a-custom-hook-in-react-1d57" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-04T06:31:09Z">Apr 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743748269"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/hasunnilupul/how-to-build-a-custom-hook-in-react-1d57" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F97huyyki8n9el4w0pyt0.png" id="article-link-2380193"> 🧩 How to Build a Custom Hook in React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(42, 7, 152, 0.10); --tag-prefix: #2A0798; --tag-bg-hover: rgba(42, 7, 152, 0.10); --tag-prefix-hover: #2A0798; " href="/t/productivity"><span class="crayons-tag__prefix">#</span>productivity</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/hasunnilupul/how-to-build-a-custom-hook-in-react-1d57#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🧩 How to Build a Custom Hook in React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a80rcve5idqlfthwqnbq7a6r65t4iugf" class="crayons-icon"><title id="a80rcve5idqlfthwqnbq7a6r65t4iugf">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2380193" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2380193" data-article-author-id="753450" aria-label="Save post 🧩 How to Build a Custom Hook in React to reading list" title="Save post 🧩 How to Build a Custom Hook in React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2379419" data-content-user-id="32367"> <a href="https://dev.to/emmanueloloke/create-a-card-component-using-chakra-ui-5b94" aria-labelledby="article-link-2379419" class="crayons-story__hidden-navigation-link">Create a Card Component Using Chakra-UI</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/emmanueloloke" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" alt="emmanueloloke profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/emmanueloloke" class="crayons-story__secondary fw-medium m:hidden"> Emmanuel Oloke </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2379419" aria-controls="story-author-preview-content-2379419" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Emmanuel Oloke profile details"> Emmanuel Oloke </button> <div id="story-author-preview-content-2379419" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/emmanueloloke" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Emmanuel Oloke</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":32367,"className":"User","name":"Emmanuel Oloke"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="32367"></div> </div> </div> </div> </div> <a href="https://dev.to/emmanueloloke/create-a-card-component-using-chakra-ui-5b94" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T21:10:17Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743714617"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/emmanueloloke/create-a-card-component-using-chakra-ui-5b94" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw3gc69navpgmrandh3zn.png" id="article-link-2379419"> Create a Card Component Using Chakra-UI </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/chakraui"><span class="crayons-tag__prefix">#</span>chakraui</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/emmanueloloke/create-a-card-component-using-chakra-ui-5b94#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Create a Card Component Using Chakra-UI"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="angibxuosryedvw05apsnt7vppyh7k7w" class="crayons-icon"><title id="angibxuosryedvw05apsnt7vppyh7k7w">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 7 min read </small> <button type="button" id="article-save-button-2379419" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2379419" data-article-author-id="32367" aria-label="Save post Create a Card Component Using Chakra-UI to reading list" title="Save post Create a Card Component Using Chakra-UI to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2379560" data-content-user-id="32367"> <a href="https://dev.to/emmanueloloke/using-intersection-observer-api-in-react-56b0" aria-labelledby="article-link-2379560" class="crayons-story__hidden-navigation-link">Using Intersection Observer API in React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/emmanueloloke" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" alt="emmanueloloke profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/emmanueloloke" class="crayons-story__secondary fw-medium m:hidden"> Emmanuel Oloke </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2379560" aria-controls="story-author-preview-content-2379560" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Emmanuel Oloke profile details"> Emmanuel Oloke </button> <div id="story-author-preview-content-2379560" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/emmanueloloke" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Emmanuel Oloke</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":32367,"className":"User","name":"Emmanuel Oloke"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="32367"></div> </div> </div> </div> </div> <a href="https://dev.to/emmanueloloke/using-intersection-observer-api-in-react-56b0" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T22:29:07Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743719347"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/emmanueloloke/using-intersection-observer-api-in-react-56b0" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxpcbcaaosvqtn72ltx5h.jpeg" id="article-link-2379560"> Using Intersection Observer API in React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/intersectionobserverapi"><span class="crayons-tag__prefix">#</span>intersectionobserverapi</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/hmtl5"><span class="crayons-tag__prefix">#</span>hmtl5</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/emmanueloloke/using-intersection-observer-api-in-react-56b0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Using Intersection Observer API in React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5f6z1c2yr72lxmkkl19qytugpc00rwq" class="crayons-icon"><title id="a5f6z1c2yr72lxmkkl19qytugpc00rwq">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 10 min read </small> <button type="button" id="article-save-button-2379560" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2379560" data-article-author-id="32367" aria-label="Save post Using Intersection Observer API in React to reading list" title="Save post Using Intersection Observer API in React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2379565" data-content-user-id="32367"> <a href="https://dev.to/emmanueloloke/timeout-2023-implementing-app-timeout-in-react-5bhi" aria-labelledby="article-link-2379565" class="crayons-story__hidden-navigation-link">Timeout 2023: Implementing App Timeout in React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/emmanueloloke" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" alt="emmanueloloke profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/emmanueloloke" class="crayons-story__secondary fw-medium m:hidden"> Emmanuel Oloke </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2379565" aria-controls="story-author-preview-content-2379565" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Emmanuel Oloke profile details"> Emmanuel Oloke </button> <div id="story-author-preview-content-2379565" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/emmanueloloke" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Emmanuel Oloke</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":32367,"className":"User","name":"Emmanuel Oloke"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="32367"></div> </div> </div> </div> </div> <a href="https://dev.to/emmanueloloke/timeout-2023-implementing-app-timeout-in-react-5bhi" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T22:34:42Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743719682"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/emmanueloloke/timeout-2023-implementing-app-timeout-in-react-5bhi" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd24dtfnwtf720b417mcb.jpeg" id="article-link-2379565"> Timeout 2023: Implementing App Timeout in React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(100, 108, 255, 0.10); --tag-prefix: #646cff; --tag-bg-hover: rgba(100, 108, 255, 0.10); --tag-prefix-hover: #646cff; " href="/t/vite"><span class="crayons-tag__prefix">#</span>vite</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/emmanueloloke/timeout-2023-implementing-app-timeout-in-react-5bhi#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Timeout 2023: Implementing App Timeout in React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1rrsaskpbs2wrutko1tzrf1ibw8za7z" class="crayons-icon"><title id="a1rrsaskpbs2wrutko1tzrf1ibw8za7z">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> <button type="button" id="article-save-button-2379565" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2379565" data-article-author-id="32367" aria-label="Save post Timeout 2023: Implementing App Timeout in React to reading list" title="Save post Timeout 2023: Implementing App Timeout in React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2379455" data-content-user-id="32367"> <a href="https://dev.to/emmanueloloke/building-charts-with-react-and-chartjs-4mlo" aria-labelledby="article-link-2379455" class="crayons-story__hidden-navigation-link">Building Charts with React and ChartJS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/emmanueloloke" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" alt="emmanueloloke profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/emmanueloloke" class="crayons-story__secondary fw-medium m:hidden"> Emmanuel Oloke </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2379455" aria-controls="story-author-preview-content-2379455" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Emmanuel Oloke profile details"> Emmanuel Oloke </button> <div id="story-author-preview-content-2379455" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/emmanueloloke" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F32367%2F5775f160-f04e-48be-a6f1-c165813adf0c.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Emmanuel Oloke</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":32367,"className":"User","name":"Emmanuel Oloke"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="32367"></div> </div> </div> </div> </div> <a href="https://dev.to/emmanueloloke/building-charts-with-react-and-chartjs-4mlo" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T21:54:04Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743717244"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/emmanueloloke/building-charts-with-react-and-chartjs-4mlo" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx96u3wg1l65cvshqi3us.jpg" id="article-link-2379455"> Building Charts with React and ChartJS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/chartjs"><span class="crayons-tag__prefix">#</span>chartjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/linechart"><span class="crayons-tag__prefix">#</span>linechart</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/piechart"><span class="crayons-tag__prefix">#</span>piechart</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/emmanueloloke/building-charts-with-react-and-chartjs-4mlo#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building Charts with React and ChartJS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akfzugj515exyqjiqn1fdmadqln6tys6" class="crayons-icon"><title id="akfzugj515exyqjiqn1fdmadqln6tys6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 12 min read </small> <button type="button" id="article-save-button-2379455" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2379455" data-article-author-id="32367" aria-label="Save post Building Charts with React and ChartJS to reading list" title="Save post Building Charts with React and ChartJS to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2378845" data-content-user-id="2647534"> <a href="https://dev.to/buttercms/migrating-from-angularjs-to-react-3cpe" aria-labelledby="article-link-2378845" class="crayons-story__hidden-navigation-link">Migrating from AngularJS to React</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/buttercms"> <img alt="ButterCMS logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F10197%2F5052e8c3-d274-47f1-b010-15cd8a3de47a.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/alex-buttercms" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2647534%2F7b6bb5de-905f-4dc4-8b15-fcf6a55fa569.png" alt="alex-buttercms profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alex-buttercms" class="crayons-story__secondary fw-medium m:hidden"> Alex </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2378845" aria-controls="story-author-preview-content-2378845" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alex profile details"> Alex </button> <div id="story-author-preview-content-2378845" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alex-buttercms" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2647534%2F7b6bb5de-905f-4dc4-8b15-fcf6a55fa569.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alex</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2647534,"className":"User","name":"Alex"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2647534"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/buttercms" class="crayons-story__secondary fw-medium">ButterCMS</a> </span> </div> <a href="https://dev.to/buttercms/migrating-from-angularjs-to-react-3cpe" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T17:39:46Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743701986"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/buttercms/migrating-from-angularjs-to-react-3cpe" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F572k90g2p8m7un3tnqdu.png" id="article-link-2378845"> Migrating from AngularJS to React </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/buttercms/migrating-from-angularjs-to-react-3cpe#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Migrating from AngularJS to React"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="asstddhjoh1km84g2lku1dx075smmu2u" class="crayons-icon"><title id="asstddhjoh1km84g2lku1dx075smmu2u">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 17 min read </small> <button type="button" id="article-save-button-2378845" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2378845" data-article-author-id="2647534" aria-label="Save post Migrating from AngularJS to React to reading list" title="Save post Migrating from AngularJS to React to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2378769" data-content-user-id="2647534"> <a href="https://dev.to/buttercms/react-best-practices-maintaining-large-scale-projects-3kbo" aria-labelledby="article-link-2378769" class="crayons-story__hidden-navigation-link">React Best Practices: Maintaining Large Scale Projects</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/buttercms"> <img alt="ButterCMS logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F10197%2F5052e8c3-d274-47f1-b010-15cd8a3de47a.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/alex-buttercms" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2647534%2F7b6bb5de-905f-4dc4-8b15-fcf6a55fa569.png" alt="alex-buttercms profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alex-buttercms" class="crayons-story__secondary fw-medium m:hidden"> Alex </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2378769" aria-controls="story-author-preview-content-2378769" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alex profile details"> Alex </button> <div id="story-author-preview-content-2378769" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alex-buttercms" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2647534%2F7b6bb5de-905f-4dc4-8b15-fcf6a55fa569.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alex</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2647534,"className":"User","name":"Alex"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2647534"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/buttercms" class="crayons-story__secondary fw-medium">ButterCMS</a> </span> </div> <a href="https://dev.to/buttercms/react-best-practices-maintaining-large-scale-projects-3kbo" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T16:58:06Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743699486"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/buttercms/react-best-practices-maintaining-large-scale-projects-3kbo" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2ftemj3npmwhjy6d0p0j.png" id="article-link-2378769"> React Best Practices: Maintaining Large Scale Projects </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/buttercms/react-best-practices-maintaining-large-scale-projects-3kbo#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React Best Practices: Maintaining Large Scale Projects"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apltk4zckgl6dfl7yg6sp17epnocvmdh" class="crayons-icon"><title id="apltk4zckgl6dfl7yg6sp17epnocvmdh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 11 min read </small> <button type="button" id="article-save-button-2378769" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2378769" data-article-author-id="2647534" aria-label="Save post React Best Practices: Maintaining Large Scale Projects to reading list" title="Save post React Best Practices: Maintaining Large Scale Projects to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2379042" data-content-user-id="2647534"> <a href="https://dev.to/alex-buttercms/react-firebase-analytics-setting-up-and-logging-events-with-google-analytics-50og" aria-labelledby="article-link-2379042" class="crayons-story__hidden-navigation-link">React Firebase Analytics: Setting Up and Logging Events with Google Analytics</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alex-buttercms" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2647534%2F7b6bb5de-905f-4dc4-8b15-fcf6a55fa569.png" alt="alex-buttercms profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alex-buttercms" class="crayons-story__secondary fw-medium m:hidden"> Alex </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2379042" aria-controls="story-author-preview-content-2379042" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alex profile details"> Alex </button> <div id="story-author-preview-content-2379042" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alex-buttercms" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2647534%2F7b6bb5de-905f-4dc4-8b15-fcf6a55fa569.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alex</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2647534,"className":"User","name":"Alex"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2647534"></div> </div> </div> </div> </div> <a href="https://dev.to/alex-buttercms/react-firebase-analytics-setting-up-and-logging-events-with-google-analytics-50og" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T18:33:13Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743705193"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/alex-buttercms/react-firebase-analytics-setting-up-and-logging-events-with-google-analytics-50og" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvrtf12ij2uakc8zhv1hx.png" id="article-link-2379042"> React Firebase Analytics: Setting Up and Logging Events with Google Analytics </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(3, 155, 229, 0.10); --tag-prefix: #039be5; --tag-bg-hover: rgba(3, 155, 229, 0.10); --tag-prefix-hover: #039be5; " href="/t/firebase"><span class="crayons-tag__prefix">#</span>firebase</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 60, 179, 0.10); --tag-prefix: #003cb3; --tag-bg-hover: rgba(0, 60, 179, 0.10); --tag-prefix-hover: #003cb3; " href="/t/googlecloud"><span class="crayons-tag__prefix">#</span>googlecloud</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/analytics"><span class="crayons-tag__prefix">#</span>analytics</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/alex-buttercms/react-firebase-analytics-setting-up-and-logging-events-with-google-analytics-50og" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2379042" aria-label="Add a comment to post - React Firebase Analytics: Setting Up and Logging Events with Google Analytics"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/alex-buttercms/react-firebase-analytics-setting-up-and-logging-events-with-google-analytics-50og#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React Firebase Analytics: Setting Up and Logging Events with Google Analytics"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aj75umf8r32g37h09xlox9o8yz483xj0" class="crayons-icon"><title id="aj75umf8r32g37h09xlox9o8yz483xj0">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 11 min read </small> <button type="button" id="article-save-button-2379042" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2379042" data-article-author-id="2647534" aria-label="Save post React Firebase Analytics: Setting Up and Logging Events with Google Analytics to reading list" title="Save post React Firebase Analytics: Setting Up and Logging Events with Google Analytics to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2378505" data-content-user-id="1236051"> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part11-475" aria-labelledby="article-link-2378505" class="crayons-story__hidden-navigation-link">Introduction to React: Understanding the Basics-part.11</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nedajahanfar" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1236051%2F553e2426-4f06-454e-bbf6-d5c76cbff3f5.jpeg" alt="nedajahanfar profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nedajahanfar" class="crayons-story__secondary fw-medium m:hidden"> nedajahanfar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2378505" aria-controls="story-author-preview-content-2378505" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="nedajahanfar profile details"> nedajahanfar </button> <div id="story-author-preview-content-2378505" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nedajahanfar" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1236051%2F553e2426-4f06-454e-bbf6-d5c76cbff3f5.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">nedajahanfar</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1236051,"className":"User","name":"nedajahanfar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1236051"></div> </div> </div> </div> </div> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part11-475" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T13:42:49Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743687769"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part11-475" data-preload-image="" id="article-link-2378505"> Introduction to React: Understanding the Basics-part.11 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part11-475#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Introduction to React: Understanding the Basics-part.11"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aek1n5aqpy0mqn0anjac2pooji9pf65c" class="crayons-icon"><title id="aek1n5aqpy0mqn0anjac2pooji9pf65c">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2378505" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2378505" data-article-author-id="1236051" aria-label="Save post Introduction to React: Understanding the Basics-part.11 to reading list" title="Save post Introduction to React: Understanding the Basics-part.11 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2378461" data-content-user-id="1236051"> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part10-1271" aria-labelledby="article-link-2378461" class="crayons-story__hidden-navigation-link">Introduction to React: Understanding the Basics-part.10</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/nedajahanfar" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1236051%2F553e2426-4f06-454e-bbf6-d5c76cbff3f5.jpeg" alt="nedajahanfar profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/nedajahanfar" class="crayons-story__secondary fw-medium m:hidden"> nedajahanfar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2378461" aria-controls="story-author-preview-content-2378461" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="nedajahanfar profile details"> nedajahanfar </button> <div id="story-author-preview-content-2378461" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/nedajahanfar" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1236051%2F553e2426-4f06-454e-bbf6-d5c76cbff3f5.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">nedajahanfar</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1236051,"className":"User","name":"nedajahanfar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1236051"></div> </div> </div> </div> </div> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part10-1271" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-03T13:14:30Z">Apr 3</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743686070"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part10-1271" data-preload-image="" id="article-link-2378461"> Introduction to React: Understanding the Basics-part.10 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/nedajahanfar/introduction-to-react-understanding-the-basics-part10-1271#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Introduction to React: Understanding the Basics-part.10"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4rgxsepxrunaoirfdzrzs68rw9g6zpm" class="crayons-icon"><title id="a4rgxsepxrunaoirfdzrzs68rw9g6zpm">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2378461" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2378461" data-article-author-id="1236051" aria-label="Save post Introduction to React: Understanding the Basics-part.10 to reading list" title="Save post Introduction to React: Understanding the Basics-part.10 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="placeholder-div"></div> <div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div> </div> <div class="loading-articles" id="loading-articles"> loading... </div> </main> <div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right"> <div class="sidebar-bg" id="sidebar-bg-right"></div> <aside class="side-bar sidebar-additional showing" id="sidebar-additional"> <div class="widget"> <header> <h4>trending guides/resources</h4> </header> <div class="widget-body"> <div class="widget-link-list"> <a class="crayons-link crayons-link--contentful" href="/mattlewandowski93/stop-chasing-new-javascript-frameworks-build-with-fundamentals-instead-1lni"> Stop Chasing New JavaScript Frameworks: Build with Fundamentals Instead 🏗️ </a> <a class="crayons-link crayons-link--contentful" href="/holasoymalva/why-the-latest-javascript-frameworks-are-a-waste-of-time-52pc"> Why the Latest JavaScript Frameworks Are a Waste of Time </a> <a class="crayons-link crayons-link--contentful" href="/wasp/from-you-will-fail-to-15000-github-stars-the-story-of-wasp-a-laravel-for-js-full-stack-1fil"> From “You will fail” to 15,000 GitHub stars: The story of Wasp, a "Laravel for JS" full-stack fra... </a> <a class="crayons-link crayons-link--contentful" href="/ruppysuppy/17-react-interview-questions-you-must-know-as-a-developer-in-2025-1o6f"> 17 React Interview Questions You Must Know as a Developer in 2025 </a> <a class="crayons-link crayons-link--contentful" href="/myogeshchavan97/top-10-react-librariesframeworks-for-2025-50i4"> Top 10 React Libraries/Frameworks for 2025 🚀 </a> <a class="crayons-link crayons-link--contentful" href="/iarchitsharma/create-lynx-project-eo7"> Create Lynx project </a> <a class="crayons-link crayons-link--contentful" href="/amazonappdev/an-android-developers-guide-to-react-native-j66"> An Android Developer's Guide to React Native </a> <a class="crayons-link crayons-link--contentful" href="/wafa_bergaoui/create-react-app-is-being-deprecated-2783"> Create React App is Being Deprecated! </a> <a class="crayons-link crayons-link--contentful" href="/parthprajapatispan/how-to-dockerize-a-react-app-a-step-by-step-guide-for-developers-57ki"> How to Dockerize a React App: A Step-by-Step Guide for Developers </a> <a class="crayons-link crayons-link--contentful" href="/arindam_1729/how-webcrumbs-github-copilot-built-my-ui-without-me-writing-a-single-line-of-css-987"> I built a Photo Editing App with Webcrumbs and GitHub Copilot🔥 </a> <a class="crayons-link crayons-link--contentful" href="/pranta/why-flutter-is-a-better-choice-than-react-native-in-2025-spoiler-its-not-a-fight-to-the-death-26a8"> Why Flutter is a Better Choice Than React Native in 2025 (Spoiler: It’s Not a Fight to the Death…... </a> <a class="crayons-link crayons-link--contentful" href="/andrewbaisden/16-ai-powered-tools-for-building-your-next-project-24l5"> 16 AI-powered tools for building your next project </a> <a class="crayons-link crayons-link--contentful" href="/myogeshchavan97/lost-in-transition-how-to-downgrade-to-tailwind-css-v3-in-nextjs-and-react-9kl"> Lost in Transition: How to Downgrade to Tailwind CSS v3 in Next.js And React </a> <a class="crayons-link crayons-link--contentful" href="/radzion/building-a-react-guitar-scale-visualizer-interactive-pentatonic-patterns-3hi6"> Building a React Guitar Scale Visualizer: Interactive Pentatonic Patterns </a> <a class="crayons-link crayons-link--contentful" href="/wafa_bergaoui/kendoreact-free-components-challenge-4b8o"> KendoReact Free Components Challenge </a> <a class="crayons-link crayons-link--contentful" href="/melvinprince/understanding-caching-in-nextjs-a-beginners-guide-5734"> Understanding Caching in Next.js: A Beginner’s Guide </a> <a class="crayons-link crayons-link--contentful" href="/leapcell/react-server-components-community-debates-and-divergences-3ch6"> React Server Components: Community Debates and Divergences </a> <a class="crayons-link crayons-link--contentful" href="/vishnusatheesh/top-7-react-hooks-you-must-know-3k7g"> Top 7 React Hooks you must know </a> <a class="crayons-link crayons-link--contentful" href="/joodi/maximizing-seo-with-meta-data-in-nextjs-15-a-comprehensive-guide-4pa7"> Maximizing SEO with Meta Data in Next.js 15: A Comprehensive Guide 📈🚀 </a> <a class="crayons-link crayons-link--contentful" href="/ayoubphy/step-by-step-guide-setting-up-trpc-better-auth-prisma-and-react-router-v7-4ho"> Step-by-Step Guide: Setting Up tRPC, Better Auth, Prisma, and React Router v7 </a> </div> </div> </div> </aside> </div> </div> <script src="https://assets.dev.to/assets/storiesList-b9c50cbd898a3a64258a3a49db1c531651b0a4a11937be35ed4651111802b5b5.js" defer="defer"></script> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/tagFollows-25496b4e3bf8bec41c7881be6b330ac8e9aa612d1ce876863a984d934d839384.js" defer="defer"></script> <script src="https://assets.dev.to/assets/feedPreviewCards-8d16b0b656456a28c0a290f756cf6e21e19833111c4796f48c631bfea8323d51.js" defer="defer"></script> <script src="https://assets.dev.to/assets/hideBookmarkButtons-0cc08aac1c422e6b6f75e5284b5350215abf211b59fb3eb8d8a4ef85e205b607.js" defer="defer"></script> <script src="https://assets.dev.to/assets/drawerSliders-823098a874684cfb50f32368b8dd1c7854954b83a588b8b6cfaef1e8fd30d858.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <style> .long-bb-body { max-height: calc(100vh - 200px); overflow: hidden; } .long-bb-bottom { height: 180px; background: linear-gradient(to top, var(--card-bg), transparent); margin-top: -180px; position:relative; z-index: 5; } </style> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/?bb=146443">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2025.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> <script> var userSignedIn = false; if (document.readyState === 'complete' || document.readyState === 'interactive') { initAuth(); } else { document.addEventListener('DOMContentLoaded', initAuth); } function initAuth() { var paramToken = new URLSearchParams(window.location.search).get('jwt'); if (paramToken && !userSignedIn) { authenticateUser(paramToken); } else { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'https://forem.com/auth_pass/iframe'; document.body.appendChild(iframe); window.addEventListener('message', function(event) { if (event.origin !== 'https://forem.com' && event.origin !== window.location.origin) { return; } var data = event.data; if (data.authenticated && !userSignedIn) { authenticateUser(data.token); } else if(data.authenticated && window.ReactNativeWebView && window.ReactNativeWebView.postMessage) { window.ReactNativeWebView.postMessage(JSON.stringify({ action: 'login', token: data.token, })); } }); } function authenticateUser(token) { fetch('/auth_pass/token_login', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getMetaContent('csrf-token'), }, body: JSON.stringify({ token: token }), }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.success) { if (document.head.querySelector('meta[name="user-signed-in"][content="false"]')) { // Reload the page to update the user's state location.reload(); } } }) .catch(function(error) { console.error('Error during authentication:', error); }); } function getMetaContent(name) { var element = document.querySelector('meta[name="' + name + '"]'); return element ? element.getAttribute('content') : ''; } } </script> </body> </html>

CINXE.COM

React - DEV Community