recoil js
//Recoil is a global state management app, which allows you to make globally accessible states across the application. //We can create atoms of states, and set their key as well as default value and access them from some other component.
react recoil
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);
Source: www.albertgao.xyz