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
Leave a Reply