Iniz is a state library that brings reactivity to ReactJS.
Motivation
ReactJS is a view library that uses "Push" strategy to detect changes and apply to actual DOM.
For developers to "push" state through components, different patterns such as HOC, render-props, Context are introduced.
These top-down approaches all have different drawbacks such as extra re-renders and "Provider Hell".
Iniz takes a different approach by treating ReactJS "Component"" as "Effect" and variable update as "Exception" in FP.
When a ReactJS "Component" is first rendered, Iniz collects its dependencies automatically and trigger re-render when the dependencies are updated.
Primitives
Iniz provides a few primitives to describe state: atom/state, effect and computed.
atom
To create a state, call atom() with first argument as initial value.
If you use TypeScript, Iniz already infers the inital value as type. You can optionally pass in a type as generic.
You can then call an "Atom" as function to get it's value. To update it, simply pass the value in the function call.
effect
After an atom is declared, it's value can be tracked with an effect.
effect() accepts function as argument and executes it once immediately.
During execution, it collects all atom's used, and triggers again whenever the atom's are updated.
computed
You can also combine atoms to become a computed value.
computed accepts a function as well. But unlike effect, it returns an atom with computed value.
React
To use Iniz primitives in ReactJS, simply replace @iniz/core with @iniz/react and replace effect with a component.
Souce code is available on inizio/iniz
Top comments (0)