@atom.io/react

React bindings for atom.io.

📖 Read the docs at atom.io.fyi

Install this package alongside atom.io and React 18 or 19. Replace imports from atom.io/react with @atom.io/react; the exports and behavior are unchanged.

Install

pnpm add atom.io @atom.io/react react

Usage

import { useO } from "@atom.io/react"
import { atom, setState } from "atom.io"
import type { ReactNode } from "react"

const countAtom = atom<number>({ key: `count`, default: 0 })

export function Counter(): ReactNode {
    const count = useO(countAtom)
    return (
        <button
            type="button"
            onClick={() => {
                setState(countAtom, (value) => value + 1)
            }}
        >
            Count: {count}
        </button>
    )
}

Effects

Explore twenty before-and-after effect examples, including React judgments and the atom.io ownership model. Move state synchronization into atoms, selectors, transactions, and Loadable states. Keep useLayoutEffect for work that requires committed layout before paint.

useAtomicRef publishes host changes after commit and clears the previous atom to null on unmount or retargeting. It skips cleanup writes to already-disposed members. Consumers must handle detachment; development StrictMode can detach and reattach a resource. Unchanged hosts are not republished, and the hook does not dispose atoms automatically.

Bundle size

Package export sizes include complete runtime export surfaces.

Sizes are exact minified and level-9 gzip JavaScript byte counts. Declarations, source maps, CSS, and other assets are excluded. Peer dependencies stay external, and shared modules are counted once per bundle.

Report maintained with tonnage.