CINXE.COM
<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="generator" content="Docusaurus v2.0.0-beta.14"> <link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Recoil RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Recoil Atom Feed"> <link rel="alternate" type="application/json" href="/blog/feed.json" title="Recoil JSON Feed"> <link rel="preconnect" href="https://www.google-analytics.com"> <script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-44373548-46","auto"),ga("send","pageview")</script> <script async src="https://www.google-analytics.com/analytics.js"></script> <link rel="search" type="application/opensearchdescription+xml" title="Recoil" href="/opensearch.xml"><title data-react-helmet="true">Recoil</title><meta data-react-helmet="true" property="og:title" content="Recoil"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:image" content="https://recoiljs.org/img/og-image.png"><meta data-react-helmet="true" name="twitter:image" content="https://recoiljs.org/img/og-image.png"><meta data-react-helmet="true" name="description" content="A state management library for React."><meta data-react-helmet="true" property="og:description" content="A state management library for React."><meta data-react-helmet="true" property="og:url" content="https://recoiljs.org/"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><link data-react-helmet="true" rel="icon" href="/img/favicon.png"><link data-react-helmet="true" rel="canonical" href="https://recoiljs.org/"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/fr/" hreflang="fr"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/ko/" hreflang="ko"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/zh-hans/" hreflang="zh-hans"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><script data-react-helmet="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="stylesheet" href="/assets/css/styles.d19c01d8.css"> <link rel="preload" href="/assets/js/runtime~main.f884d970.js" as="script"> <link rel="preload" href="/assets/js/main.d618b56e.js" as="script"> </head> <body> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"> <div id="docusaurus-base-url-issue-banner-container"></div><div><a href="#" class="skipToContent_OuoZ">Skip to main content</a></div><div class="announcementBar_axC9" style="background-color:#20232a;color:#fff" role="banner"><div class="announcementBarContent_6uhP">Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.fb.com/support-ukraine">Help Provide Humanitarian Aid to Ukraine</a>.</div></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" target="_self" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="Recoil" class="themedImage_TMUO themedImage--light_4Vu1"><img src="/img/logo--dark.svg" alt="Recoil" class="themedImage_TMUO themedImage--dark_uzRr"></div></a><a class="navbar__item navbar__link" href="/docs/introduction/installation">Docs</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/docs/recoil-sync/introduction">Recoil Sync</a><a class="navbar__item navbar__link" href="/docs/refine/Introduction">Refine</a><a class="navbar__item navbar__link" href="/docs/recoil-relay/introduction">GraphQL</a><a class="navbar__item navbar__link" href="/resources">Tutorials</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/facebookexperimental/Recoil" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" class="navbar__link"><span><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" class="iconLanguage_EbrZ"><path fill="currentColor" d="M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 011.229-.799l.082 4.277a2.773 2.773 0 01-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 00-.196-.145h-1.95a.194.194 0 00-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"></path></svg><span>English</span></span></a><ul class="dropdown__menu"><li><a href="/" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active">English</a></li><li><a href="/fr/" target="_self" rel="noopener noreferrer" class="dropdown__link">Français</a></li><li><a href="/ko/" target="_self" rel="noopener noreferrer" class="dropdown__link">한국어</a></li><li><a href="/zh-hans/" target="_self" rel="noopener noreferrer" class="dropdown__link">简体中文</a></li></ul></div><div class="toggle_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><div class="searchBox_Utm0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><header class="hero hero--primary heroBanner_4JBe"><div class="container"><h1 class="hero__title"><svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1912.04 530.06" aria-label="Recoil" width="200"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:42px}.cls-2{stroke-linecap:square}</style></defs><path class="cls-1" d="M351.37 529.35v-20.29c0-42.54-17.16-83.55-48.13-115L245.1 324.7"></path><path class="cls-1" d="m21 529.35 1.16-375.72c.06-26.93 23.67-48.73 52.78-48.73h157.53a130.1 130.1 0 0 1 39.53 7.68s18.6 6.78 33.65 18.52c14 10.91 43 41.71 42.55 86.65-.59 54.19-43.67 86.11-54.08 92.34a239.28 239.28 0 0 1-23.12 11.7 226.54 226.54 0 0 1-21.56 8.13L26.77 384.55"></path><path class="cls-2" d="M465.94 310.26h209.4A99.25 99.25 0 0 0 774.59 211h0a99.26 99.26 0 0 0-99.25-99.25H565.2A99.26 99.26 0 0 0 465.94 211v188.87a99.26 99.26 0 0 0 99.26 99.25h176.49M1763.47 111.01v380.94M1632 399.87a99.26 99.26 0 0 1-99.25 99.25H1422.6a99.26 99.26 0 0 1-99.25-99.25V211a99.26 99.26 0 0 1 99.25-99.25h110.15A99.26 99.26 0 0 1 1632 211h0ZM1891.04 21v470.95"></path><path style="fill:#fff" d="M1742.74 1.53h41.59v38.93h-41.59z"></path><path class="cls-2" d="M1198.62 404.69a99.25 99.25 0 0 1-99.26 99.25H989.22A99.25 99.25 0 0 1 890 404.69V215.83a99.26 99.26 0 0 1 99.25-99.25h110.14a99.26 99.26 0 0 1 99.26 99.25h0"></path></svg><div class="hiddenText_ZVH8" aria-hidden="true">Recoil</div></h1><p class="hero__subtitle">A state management library for React</p><div class="buttons_TK4-"><a class="hero__button button button--outline button--secondary button--lg" href="/docs/introduction/getting-started">Get Started</a></div></div></header><main><div class="container text--center margin-bottom--lg margin-top--lg"><div class="row"><div class="col iframeContainer_VN+g"><h2>Brief Introduction into Recoil</h2><div style="padding:1px;max-width:560px;width:100%"><iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/U9XStcquQyY?" title="Explain Like I'm 5: Recoil" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div></div><div class="col iframeContainer_VN+g"><h2>Deep Dive into Recoil</h2><div style="padding:1px;max-width:560px;width:100%"><iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/_ISAA_Jt9kI" title="Recoil: State Management for Today's React - Dave McCabe aka @mcc_abe at @ReactEurope 2020" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div></div></div></div><section class="features_ENLn"><div class="container"><div class="row"><div class="col col--4 feature_TThj"><div><img class="featureImage_fOUF" src="/img/icons/icon-reactish.svg" alt="React logo."></div><h3>Minimal and Reactish</h3><p>Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.</p></div><div class="col col--4 feature_TThj"><div><img class="featureImage_fOUF" src="/img/icons/icon-functional.svg" alt="F at x, representing functional programming."></div><h3>Data-Flow Graph</h3><p>Derived data and asynchronous queries are tamed with pure functions and efficient subscriptions.</p></div><div class="col col--4 feature_TThj"><div><img class="featureImage_fOUF" src="/img/icons/icon-observation.svg" alt="Connected dots, representing observation of values from various points in an application."></div><h3>Cross-App Observation</h3><p>Implement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.</p></div></div></div></section></main></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Learn</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/introduction/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/introduction/core-concepts">Core Concepts</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items"><li class="footer__item"><a href="https://twitter.com/recoiljs" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items"><li class="footer__item"><a href="https://github.com/facebookexperimental/Recoil" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items"><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noreferrer noopener" class="footer__link-item"><span>Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noreferrer noopener" class="footer__link-item"><span>Terms<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_SRtH"><img src="/img/oss_logo.png" alt="Facebook Open Source Logo" class="themedImage_TMUO themedImage--light_4Vu1 footer__logo"><img src="/img/oss_logo.png" alt="Facebook Open Source Logo" class="themedImage_TMUO themedImage--dark_uzRr footer__logo"></a></div><div class="footer__copyright">Copyright © 2023 Facebook, Inc. Built with Docusaurus.</div></div></div></footer></div> <script src="/assets/js/runtime~main.f884d970.js"></script> <script src="/assets/js/main.d618b56e.js"></script> </body> </html>