Deciding which state management library to use in a new [**React**](https://reactjs.org/) project can be quite a challenge – there are so many options. Obviously [**Redux**](https://redux.js.org/) is high on the list, however it requires a lot of boilerplate even in small apps that don’t require a lot of global state management. On the other hand, [**React Context**](https://reactjs.org/docs/context.html) is very simple, but any change to the _value_ prop causes all the consumer’s children to rerender, even when only a small bit of the data is being used by them. You could use [**Mobx**](https://mobx.js.org/), but there’s a steep learning curve there, especially if you’re not quite familiar with observables. That said, there is nothing wrong with any of these solutions, but they all have one downside – they are ‘external’ to React. Wouldn’t it be better to have something created especially for React? The new kid on the block comes from the React team themselves – it’s called [**Recoil**](https://recoiljs.org/). The library is still in the experimental phase and has not been released in a stable version, but it’s a good time to start playing around with it, since it might prove the best choice for React developers in the near future. So what is Recoil and what makes it so special? I will try to explain while creating a small shop that allows users to purchase some products. Let’s start with the basic stuff – first we need to wrap our app (or just the part that needs access to the global state) in `RecoilRoot` (remember to import it from _recoil_, I won’t include all the imports here). ```javascript ReactDOM.render( , document.getElementById("root") ); ``` That’s it, we’re all set to use Recoil in our code! The smallest unit of state in Recoil is called an atom. It is a function that requires a unique key and a default value, and returns a writable piece of state. ```javascript const cartState = atom({ key: "cartState", default: [], }); ``` To write/read from that atom, we need to use the useRecoilState hook. ```javascript const [cart, setCart] = useRecoilState(cartState); ``` Looks nice and simple, doesn’t it? And the best thing is, it has the exact same syntax as standard React hooks, which dramatically flattens the learning curve once you get familiar with some basic Recoil concepts. Let’s stock our little shop with some products. ```javascript const products = [ { name: "Toothbrush", price: 10 }, { name: "Smart TV", price: 800 }, { name: "Laptop", price: 600 }, { name: "Chocolate", price: 12 }, { name: "Apple juice", price: 5 }, ]; ``` Next, we’ll display them to the user so they can add them to their cart. ```javascript const ShopProducts = () => { const setCart = useSetRecoilState(cartState); const addToCart = (product) => setCart((cart) => cart.find((item) => item.name === product.name) ? cart : [...cart, product] ); return ( <> PRODUCTS:

{products.map((product) => (

{product.name} (${product.price})

))}

); }; ``` In this component we do not need access to the cart, we only require a setter function to be able to add products to it. We can use the `useSetRecoilState` hook in the `setCart` function to achieve this. Now all we need to do is render this component within our app. ```javascript const App = () => (

); ``` Now we can see a list of products, each having a button next to it that says ‘Add to cart’. But what about the cart? We need a way of showing it’s content to the user. Let’s take care of that. ```javascript const Cart = () => { const [cart, setCart] = useRecoilState(cartState); const removeFromCart = (product) => setCart((cart) => cart.filter((item) => item.name !== product.name)); return ( <> CART:

{!cart.length ? "Empty" : cart.map((product) => (

{product.name} (${product.price})

))}

); }; ``` And remember to include Cart in the app. ```javascript const App = () => (

); ``` Now we are able to see the cart’s content or the string ‘Empty’ it’s empty. Of course – I know, I know – we could use some fancy icon to represent an empty cart, and we could also allow users to buy multiple products of the same type, but hey it’s just a simple app to demonstrate how easy it is to manage the state with Recoil, so bear with me please. Next thing we need is to display the total price. We can do that using a selector. ```javascript const cartDetailsState = selector({ key: "cartDetailsState", get: ({ get }) => { const cart = get(cartState); const total = cart.reduce((prev, cur) => prev + cur.price, 0); return { total, }; }, }); ``` Simple as that! Selectors let you create derived state from atoms, but you can also pass props to them, or even access setter functions, but we’ll get there later. The next step is to add a component that will read the cart details state. ```javascript const CartDetails = () => { const { total } = useRecoilValue(cartDetailsState); return

TOTAL: ${total}

; }; const App = () => (

); ``` ## Item Discounts Let’s say we want to allow the shop manager to set discounts for all the products. We can create a simple select with a few options, prepare an atom for holding the shop’s configuration, which will include the discount, and then expand the `CartDetails` selector logic to include the new state: ```javascript const shopConfigState = atom({ key: "shopState", default: { discount: 0, }, }); const cartDetailsState = selector({ key: "cartDetailsState", get: ({ get }) => { const { discount } = get(shopConfigState); const cart = get(cartState); const total = cart.reduce((prev, cur) => prev + cur.price, 0); const discountAmount = total * discount; return { total, discountAmount, }; }, }); const CartDetails = ({ total, discount, discountAmount, setCart }) => (

DISCOUNT: {discount * 100}% (${discountAmount})

TOTAL: {total}

TOTAL AFTER DISCOUNT: {total - discountAmount}

); const ShopConfig = () => { const [shopState, setShopState] = useRecoilState(shopConfigState); const updateDiscount = ({ target: { value } }) => { setShopState({ ...shopState, discount: value }); }; return (

Discount:

); }; const App = () => (

); ``` Now our little shopping app is complete! The code looks very simple compared to Redux, but it has even more out-of-the-box features which make it a great competitor for all the other state management tools, and the coolest one is that it supports asynchronicity! Just like that, no additional libraries are needed, no extra code needs to be added. ## **Asynchronous** Let’s change the way we provide the product list to the shop. ```javascript const getProductsFromDB = async () => new Promise((resolve) => { setTimeout(() => resolve(products), 2500); }); const productsQuery = selector({ key: "Products", get: async () => getProductsFromDB(), }); ``` `getProductsFromDB` is a function that waits 2.5 second (to simulate a network latency, or database response time) to simply resolve a promise with the product list that we’ve created at the beginning. The important part here is the selector with an async getter function – it simply calls the aforementioned function. Recoil is built to work with [**React Suspense**](https://reactjs.org/docs/react-api.html#reactsuspense), and this is how they can be connected. ```javascript const ShopProducts = () => { const shopProducts = useRecoilValue(productsQuery); const setCart = useSetRecoilState(cartState); const addToCart = (product) => setCart((cart) => cart.find((item) => item.name === product.name) ? cart : [...cart, product] ); return ( <> PRODUCTS:

{shopProducts.map((product) => (

{product.name} (${product.price})

))}

); }; const App = () => (

Loading products...

}> ); ``` From now on, before the product list gets displayed on the screen, the user will see a nice fallback loader component for 2.5 seconds. What about handling errors? Simply wrap the component in an [**error boundary**](https://reactjs.org/docs/error-boundaries.html). But what if I don’t really want to use React Suspense? It’s still experimental and using it in production is still discouraged (well, so is Recoil). There is a way of using async Recoil without Suspense. ```javascript const ShopProducts = () => { const setCart = useSetRecoilState(cartState); const shopProducts = useRecoilValueLoadable(productsQuery); const addToCart = (product) => setCart((cart) => cart.find((item) => item.name === product.name) ? cart : [...cart, product] ); switch (shopProducts.state) { case "loading": return

Loading products...

; case "hasError": throw shopProducts.contents; case "hasValue": return ( <> PRODUCTS:

{shopProducts.contents.map((product) => (

{product.name} (${product.price})

))}

); } }; ``` When using `useRecoilValueLoadable`, we get access to an object containing the current state of an async selector’s promise and, when it’s resolved, either to contents or error. This works exactly the same as in case of using Suspense. ## Summary To sum up, there are numerous ways of dealing with global state in React apps. Some have a steep learning curve, others are inefficient and in most cases and dedicated to just some pieces of state that don’t change very often. Now that we have Recoil within our reach, we can write state logic in a very similar way to how we write UI logic. The result is that creating React apps is even simpler and even more fun! If you’d like to experiment, the [**recoil-demo source is available on Github**](https://github.com/jakub-abramowski-sonalake/recoil-demo). Happy coding!

jakubabramowski

React State Management with Recoil

Join Our Newsletter. No Spam, Only the good stuff.