RECOT RECOL
import { atom, useRecoilValue, selector } from "recoil";
// create an atom
const numberState = atom({
key: "numberState",
default: 0,
});
// then use it
function Component() {
const [number, setNumber] = useRecoilState(numberState);
return <button onClick={() => setNumber((num) => num + 1)}>{number}</button>;
}
// to derive an atom
const aboveFiveState = selector({
key: "aboveFiveState",
get: ({ get }) => {
const number = get(numberState);
return number > 5;
},
});
// async atom
const userState = atom({
key: "userState",
get: async ({ get }) => getUser(),
});
// if you only want to read an atom
const number = useRecoilValue(numberState);
// if you only want to write to an atom
const setNumber = useSetRecoilState(numberState);
Unsightly Unicorn