CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>React useCallback Guides - DEV Community</title> <meta name="last-updated" content="2024-11-28 02:44:38 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1732761878"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-8dcc8a97f0617dfbfe06690e34a9d71cb7dd6554611a24ec3f71fb6b96414828.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-147cebefc5c4cddde055e8f5eb0055e811469b08405170e2411fbd7944b5ac04.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-bc498cfd7bb7d2a2da59d68d0b2055cc2dd26fee3669ab88edbb396d37bc3369.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-cc5e8a352578866203771def747f37c3ec6a0869de0458328e0fcba3d5d2fceb.js"> <link rel="canonical" href="https://dev.to/react-usecallback-guides" /> <meta name="description" content="React useCallback Guides — DEV Community"> <meta name="keywords" content="software development, engineering, rails, javascript, ruby"> <meta property="og:type" content="article" /> <meta property="og:url" content="https://dev.to/react-usecallback-guides" /> <meta property="og:title" content="React useCallback Guides — DEV Community" /> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta property="og:description" content="Top DEV Guides about all things React useCallback." /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:title" content="React useCallback Guides — DEV Community"> <meta name="twitter:description" content="Top DEV Guides about all things React useCallback."> <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="2024-11-27T20:09:47Z" data-latest-commit-id="39401f1330aa77effb25163fd2a840dcd3adb045" 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-ga4-tracking-id="G-TYEM8Y3JN3"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.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="afpahcsx03wxjpra9ygk2syvl0htdnxm" class="crayons-icon"><title id="afpahcsx03wxjpra9ygk2syvl0htdnxm">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="a4x02d57nrk98zg4oawdew13qrpc155f" aria-hidden="true" class="crayons-icon"><title id="a4x02d57nrk98zg4oawdew13qrpc155f">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="a9n7iqrnph1doynx042wcmdngsm1em3a" aria-hidden="true" class="crayons-icon"><title id="a9n7iqrnph1doynx042wcmdngsm1em3a">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"> <a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="afmhrrxtkwx6ieposzmmqg5f94r6lq15" class="crayons-icon"><title id="afmhrrxtkwx6ieposzmmqg5f94r6lq15">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> </a> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="/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="at74p543eqcm2gr4hs9lj3ug9nn51x6k" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="at74p543eqcm2gr4hs9lj3ug9nn51x6k">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 stories stories-show pageslug-react-usecallback-guides" data-current-page="stories-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> <script src="https://assets.dev.to/assets/homePage-5643b14dfc436f410e9f6334243ccf9a67528b80fea52142ee2e9b4958f55ad2.js" defer="defer"></script> <main id="main-content"> <div class="crayons-layout crayons-layout--limited-l"> <div class="crayons-card text-styles text-padding"> <h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">React useCallback Guides</h1> <p>useCallback is used when a child is rerendering again and again without need.</p> <p>This is a collection of top and trending guides written by the community on subjects related to <strong>React useCallback concepts</strong>. For all things React, check out the <a href="https://dev.to/t/react">React tag</a>! Please contribute more posts like this to help your fellow developer in need.</p> <h2> <a name="when-to-use-usecallback-reactjs" href="#when-to-use-usecallback-reactjs"> </a> <a href="https://dev.to/boywithsilverwings/when-to-use-usecallback-dod">When to use useCallback - ReactJS?</a> </h2> <blockquote> <p>Now, to apply the <code>memo</code> magic again, we need to make sure that <code>resetCount</code> function is not unnecessarily recreated on every render of <code>Parent</code>. This is exactly what <code>useCallback</code> helps us to do.<br></p> </blockquote> <hr> <h2> <a name="react-usecallback-hooks-simple-explanation" href="#react-usecallback-hooks-simple-explanation"> </a> <a href="https://dev.to/azrulaziz/react-usecallback-hooks-simple-explanation-1c1g">React: useCallback hooks simple explanation</a> </h2> <blockquote> <p>UseCallback is one of the new features introduced in the react hooks API. Personally the name is quite confusing because callback is usually referred to asynchronous functions, the function that we invoke whenever a certain operation has finished. useCallback however is used for a different purpose.</p> </blockquote> <hr> <h2> <a name="when-to-usecallback-and-usememo-in-our-react-projects" href="#when-to-usecallback-and-usememo-in-our-react-projects"> </a> <a href="https://dev.to/brayanarrieta/when-to-usecallback-and-usememo-in-our-react-projects-199j">When to useCallback and useMemo in our React projects?</a> </h2> <blockquote> <p>Today we will talk about when to useCallback and useMemo React hooks in our projects.</p> </blockquote> <hr> <h2> <a name="demystifying-react-hooks-usecallback-and-usememo" href="#demystifying-react-hooks-usecallback-and-usememo"> </a> <a href="https://dev.to/milu_franz/demystifying-react-hooks-usecallback-and-usememo-1a8j">Demystifying React Hooks: useCallback and useMemo</a> </h2> <blockquote> <p>Some hooks are easier to understand and use than others, therefore this series of posts will focus on demystifying the hooks that are not as straightforward. Let’s start by explaining <strong>what occurs when a component re-renders</strong>, followed by <strong>defining the purpose of useCallback and useMemo</strong>, and finally discussing <strong>when it is and when it is not appropriate to use these hooks.</strong></p> </blockquote> <hr> <h2> <a name="understanding-usecallback-in-react" href="#understanding-usecallback-in-react"> </a> <a href="https://dev.to/ilizette/understanding-usecallback-in-react-5d34">Understanding useCallback in react</a> </h2> <blockquote> <p>Hello there, so we have almost covered the most used hooks in Reactjs. In my last post, we talked about the <code>useRef</code> hook. In this post, we'll be covering the <code>useCallback</code> hook. So let's start right away.</p> </blockquote> <hr> <h2> <a name="reactmemo-usememo-and-usecallback-for-performance-optimizations-in-react" href="#reactmemo-usememo-and-usecallback-for-performance-optimizations-in-react"> </a> <a href="https://dev.to/changoman/react-memo-usememo-and-usecallback-for-performance-optimizations-in-react-2h0a">React.memo, useMemo, and useCallback for Performance Optimizations in React</a> </h2> <blockquote> <p>14:24 - When passing Functions down as props, and when Functions are used in a dependency array, wrap them in the useCallback hook to avoid re-renders and prevent useEffects from firing on each re-render.</p> </blockquote> <hr> <h2> <a name="how-to-make-your-functional-react-components-perform-better-with-usecallback-and-memo" href="#how-to-make-your-functional-react-components-perform-better-with-usecallback-and-memo"> </a> <a href="https://dev.to/shadowwarior5/how-to-make-your-functional-react-components-perform-better-using-usecallback-and-memo-2f9a">How to make your functional React components perform better (with useCallback and memo)</a> </h2> <blockquote> <p>Let's rewrite <b>changeSelection</b> declaration using <b>useCallback</b> hook:<br><br> See updated codepen example:<br></p> <p><br><br> We are not redeclaring them anymore. Great success!</p> </blockquote> <hr> <h2> <a name="usememo-and-usecallback-with-example-in-react" href="#usememo-and-usecallback-with-example-in-react"> </a> <a href="https://dev.to/sahilthakur7/usememo-and-usecallback-with-example-in-react-51h8">useMemo and useCallback with example in React</a> </h2> <blockquote> <p>This article is originally written here along with the code images -> <a href="https://easyontheweb.com/usememo-and-usecallback-with-example-in-react/"></a><a href="https://easyontheweb.com/usememo-and-usecallback-with-example-in-react/">https://easyontheweb.com/usememo-and-usecallback-with-example-in-react/</a></p> </blockquote> <hr> <h2> <a name="state-management-in-pure-react-with-hooks-usecallback-and-reactmemo" href="#state-management-in-pure-react-with-hooks-usecallback-and-reactmemo"> </a> <a href="https://dev.to/bipinrajbhar/state-management-in-pure-react-with-hooks-usecallback-n6l">State Management in Pure React with Hooks: useCallback and React.memo</a> </h2> <blockquote> <p>So, today you are going to learn all the basic concepts of <code>useCallback</code> Hook in this article.</p> </blockquote> <hr> <h2> <a name="react-hooks-why-usecallback-" href="#react-hooks-why-usecallback-"> </a> <a href="https://dev.to/bhupendra1011/react-hooks-why-usecallback-5hk8">React Hooks | Why useCallback ?</a> </h2> <blockquote> <p>On Component mount, fnCount had one 1 entry but on each re-render of component <em>saveText</em> fn is re-initialized and is brand new so now fnCount has 4 entries (1 + 3 for each re-render). Since <em>saveText</em> is related to name state so should not be re-run on button click. This is the problem <strong>useCallback</strong> solves by not letting React to initialize function on each render unless dependencies in useCallback changes. </p> </blockquote> <hr> <h2> <a name="using-the-usecallback-react-hook" href="#using-the-usecallback-react-hook"> </a> <a href="https://dev.to/saranshk/using-the-usecallback-react-hook-54b0">Using the useCallback React hook</a> </h2> <blockquote> <p>The useCallback React hook is a useful hook that can help in optimizing the rendering performance of our functional React components. It is used to memoize functions which means it caches the return value of a function given a set of input parameters.</p> </blockquote> <hr> <h2> <a name="utilize-the-power-of-usestate-and-usecallback-hooks-in-react" href="#utilize-the-power-of-usestate-and-usecallback-hooks-in-react"> </a> <a href="https://dev.to/nitsancohen770/utilize-the-power-of-usestate-and-usecallback-hooks-in-react-4d1e">utilize the power of useState and useCallback hooks in React</a> </h2> <blockquote> <p>What is the right way of using the useCallback and useState hooks in conjunction?</p> </blockquote> <hr> <h2> <a name="a-quick-guide-to-react-usecallback-hook" href="#a-quick-guide-to-react-usecallback-hook"> </a> <a href="https://dev.to/alexdevero/a-quick-guide-to-react-usecallback-hook-47dn">A Quick Guide to React useCallback Hook</a> </h2> <blockquote> <p>The React useCallback hook can help you improve performance of your React apps. It is weird that useCallback hook is one of the hooks that are not discussed as often. In this tutorial, you will learn about what React useCallback is, how it works and how to use it. You will also learn a bit about memoization.</p> </blockquote> <hr> <h2> <a name="when-to-use-usememo-and-usecallback-in-react" href="#when-to-use-usememo-and-usecallback-in-react"> </a> <a href="https://dev.to/nicozerpa/when-to-use-usememo-and-usecallback-in-react-1d17">When to use useMemo and useCallback in React?</a> </h2> <blockquote> <p>These two React hooks, <code>useMemo</code> and <code>useCallback</code> are useful when you’re dealing with expensive operations (that is, operations that are very complex and take a lot of time and resources, like CPU.)</p> </blockquote> <hr> <p><strong>Happy React useCallback coding!</strong></p> </div> </div> </main> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/billboards/page_fixed_bottom?page_id=371"></div> <script src="https://assets.dev.to/assets/billboard-a7ffd2b38d410444a4ef2d42c6ce905699d84b1520aed314b817a767ddc3b362.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"> <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="152338" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/">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="/guides"> Guides </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 - 2024.</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> </body> </html>