Recoil is the State Management Library for React they use at Facebook.
Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously
Best to watch the talk from React Europe 2020 embedded above. It clearly explains why Recoil come to exist, and when & how to use it.
useImmer(initialState) is very similar to useState. The function returns a tuple, the first value of the tuple is the current state, the second is the updater function, which accepts an immer producer function, in which the draft can be mutated freely, until the producer ends and the changes will be made immutable and become the next state.
Nice work by Jared Palmer: a React State Management Library which uses Immer internally so you don’t have to worry about overwriting (unrelated) parts of your state whilst updating some value in it.
import React from 'react';
import { render } from 'react-dom';
import { createStore, Provider, useSelector } from 'mutik';
// Create a lil' store with some state
let store = createStore({
count: 0,
});
// Pass the store to the Provider.
function App() {
return (
<Provider store={store}>
<div>
<Label />
<Buttons />
</div>
</Provider>
);
}
// You can mutate the store from anywhere you want to,
// even outside of React code. Mutate is based on immer.
function increment() {
store.mutate(state => {
state.count++;
});
}
// Or you can update it like React.useState's update
function decrement() {
store.set(prevState => ({
...state,
count: state.count - 1
});
}
// You don't need to pass it down as props either,
// although you can if you need to.
function Buttons() {
return (
<React.Fragment>
<button onClick={decrement}>-</button>
<button onClick={increment}>+</button>
</React.Fragment>
);
}
function Label() {
// You can subcribe to "slices" of mutable state with useSelector
// Note: be sure to memoize these with React.useCallback
const selector = React.useCallback(state => state.count, []);
const count = useSelector(selector);
return <p>The count is {count}</p>;
}
render(<App />, window.root);
As you can see in the code example you can use store.set or leverage its power by calling store.mutate which takes an Immer-style updater function as its argument.
Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn’t boilerplatey or opinionated, but still just enough to be explicit and flux-like.
Here’s where things get interesting: To use parts of the store in child components, call the useStore hook, selecting the piece you need from it — no providers needed:
Unstated is designed to build on top of the patterns already set out by React components and (the new) Context.
Unstated is built upon three pieces that all work together:
Container
<Subscribe>
<Provider>
The idea is that the Container only keeps itself busy with the state. Using <Subscribe> you can link that state to your Component. The <Provider> wraps itself around everything, keeping things together.