Iniz: Makes ReactJS actually reactive

Iniz is a state library that brings reactivity to ReactJS.


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.


Iniz provides a few primitives to describe state: `atom`/`state`, `effect` and `computed`.


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.


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.


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.


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

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.