Component state in React is passed through Parent and Child, which requires the use of Props to pass state.
Definition taken from the Recoil API:
‘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.’
State is passed through Atoms, a new form of passing state which differs from the cumbersome Redux method, which is free from the inheritance model we are accustomed to in React and JS.
Here’s an example of state passed via a Recoil Atom:
const fontSizeState = atom({key: 'fontSizeState',default: 14,});
Recoil state is called using hooks, as seen in the hook below useRecoilState:
function FontButton() {const [fontSize, setFontSize] = useRecoilState(fontSizeState);return (<button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>Click to Enlarge
