Entangle — 1kb alternative to RecoilJS
Entangle is a super simple, super lightweight alternative to Jotai and RecoilJS.
Inspired by both Jotai and RecoilJS, I wanted to take a typescript first approach with proxies and a result Entangle was born. It does not use context, has no dependences and is < 1kb gzipped with a slightly different (in my opinion) simplier API.
Lets get started by building a simple todo app.
yarn add @bennyg_123/entangleOverview
Atom : basic state building block
Each atoms represents a piece of state that are independent of each other in our app. In this case we have the list of todo’s and the filter state.
Molecules : subscribers to Atom’s
Molecules represent derived state, which come from atoms. In this case the resulting filtered list which we show to the user is the result of the LIST atom and the SELECTED_FILTERED atom.
useEntangle: the hook that binds everything together
useReadEntangle: a readonly version of useEntangle
useEntangle is a hook that functions exactly like useState except you pass an atom as the initial value. It returns the atoms value and setter function. All components that call useEntangle with the same atom will be linked together and update at the same time when the atom value changes.
useReadEntangle is the read only version that only returns the value of the atom or molecule. Since molecules are read only by design, this hook is perfect for use with them.
A more redux like approach.
Now for our simple example, a couple of atom and hooks may not be a problem but for more complex apps it might get horribly convoluted with atoms and hooks everywhere. Not to mention the coupling of atoms with components can make tracking down bugs quite difficult. For this reason some folks may opt for a more redux like approach shown below.
The makeAtomSnapshot function takes in a function where side effects can happen. The first two values passed into the function are a get and a set function. The get takes in an atom and return the value, while the set takes in an atom and a new value and sets the new value to the atom. Thus allowing for manipulation of an atom outside of components. This will still trigger the state changes.
When calling the resulting function from makeAtomSnapshot, you can pass in any number of arguments and these will be added after the get and set functons like the action shown above.
Please checkout the github for other hooks and documentation. Have fun and Happy New Year!!!
