Iniz

Iniz is a reactive state library. Try it out on our website!

npm i @iniz/react

• Guide

Guide

@iniz/react already re-exports @iniz/core, so don't need to install @iniz/core yourself

Simply use atom() values in components, they will re-render correctly thanks to useSyncExternalStore

import { useAtom, useComputed, useSideEffect } from "@iniz/react";

// The component won't re-render when `nestedCounter$().obj.array[0].count` is updated
function MessageInput() {
  // Equivalient to `atom()`
  const counter = useAtom(10);

  // Equivalent to `computed()`
  const computedCounter = useComputed(
    () => `Computed: ${nestedCounter$$().obj.message}`
  );

  // Equivalent to `effect()`
  // NOTE: You can also use `useEffect` with atoms actually
  useSideEffect(() => {
    console.log("[Latest message] ", computedCounter());
  });

  return (
    <div>
      <button onClick={() => counter(counter() + 1)}>{counter()}++</button>
      <input
        value={nestedCounter$().obj.message}
        onChange={(evt) => (nestedCounter$().obj.message = evt.target.value)}
      />
    </div>
  );
}