Introduction

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.

How it works

When a ReactJS "Component" is first rendered, Iniz collects its dependencies automatically and trigger re-render when the dependencies are updated.

Below is a basic counter example to give you a taste of how it looks like:

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

import { atom } from "@iniz/react";

const counter = atom(0);

const decrement = () => counter(counter() - 1);

const increment = () => counter(counter() + 1);

function Counter() {

return (

<div>

<button onClick={decrement}>-</button>

{counter()}

<button onClick={increment}>+</button>

</div>

);

}

export default Counter;