Recoil is a great alternative for state-management libraries such as redux, redux-toolkit, mobx, or any other tool. No doubt that redux is the king in that field, but at the same time many developers struggle with the complexity and boilerplate that comes with redux.
I'm not going to introduce Recoil in this article. The recoil docs are quite straightforward, so please, visit the docs:
https://recoiljs.org/docs/introduction/getting-started/
For complex implementation check this excellent article: https://jasonwatmore.com/post/2021/09/16/react-recoil-user-registration-and-login-example-tutorial
Recoil devtools#
Recoil has functionality to allow you to observe and update state changes, but no built-in UI tool or browser extension. Recoil-gear is a simple debug component that connects Redux DevTools to Recoil.\ Redux DevTools is one of the main features that developers love working with Redux, so recoil-gear is combining two great tools.
Getting started with Recoil and recoil-gear#
install with yarn:
yarn add recoil recoil-gear
install with npm:
npm install recoil recoil-gear
install Redux DevTools:
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
usage:
import * as React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { RecoilRoot } from 'recoil'
import { RecoilDevTools } from 'recoil-gear'
ReactDOM.render(
<React.StrictMode>
<RecoilRoot>
<RecoilDevTools />
<App />
</RecoilRoot>
</React.StrictMode>,
document.getElementById('root')
)
Open up redux devtools and observe state changes in redux devtools
