Bunja is State Lifetime Manager for React. (Minified & gzipped size < 1kB)
Heavily inspired by Bunshi.

Definition: Bunja (分子 / 분자) - Korean for molecule, member or element.

Global state managers like jotai or signals offer the advantage of declaratively describing state and effectively reducing render counts, but they lack suitable methods for managing resources with a defined start and end.
For example, consider establishing and closing a WebSocket connection or a modal form UI that appears temporarily and then disappears.

Bunja is a library designed to address these weaknesses.
Each state defined with Bunja has a lifetime that begins when it is first depended on somewhere in the render tree and ends when all dependencies disappear.

Therefore, when writing a state to manage a WebSocket, you only need to create a function that establishes the WebSocket connection and an dispose handler that terminates the connection.
The library automatically tracks the actual usage period and calls the init and dispose as needed.

No. Bunja focuses solely on managing the lifetime of state, so jotai and other state management libraries are still valuable.
You can typically use jotai or something, and when lifetime management becomes necessary, you can wrap those states with bunja.

Bunja basically provides two functions: bunja and useBunja.
You can use bunja to define a state with a finite lifetime and use the useBunja hook to access that state.

You can define a bunja using the bunja function. When you access the defined bunja with the useBunja hook, a bunja instance is created.
If all components in the render tree that refer to the bunja disappear, the bunja instance is automatically destroyed.

If you want to trigger effects when the lifetime of a bunja starts and ends, you can use the Bunja.effect field.

import { bunja, Bunja, useBunja } from "bunja";

const countBunja = bunja([], () => {
  const countAtom = atom(0);
  return {
    countAtom,
    [Bunja.effect]() {
      console.log("mounted");
      return () => console.log("unmounted");
    },
  };
});

function MyComponent() {
  const { countAtom } = useBunja(countBunja);
  const [count, setCount] = useAtom(countAtom);
  // Your component logic here
}

TODO: context