reatom logo


React bindings package for Reatom store.

npm npm type definitions npm bundle size GitHub

Reatom is declarative and reactive state manager, designed for both simple and complex applications. See docs.


npm i @reatom/react-v2


yarn add @reatom/react-v2

@reatom/react-v2 depends on and works with @reatom/core-v2 and react. You should install this packages too.

Hooks Api

If you use React 16 or 17 you should setup batch bindings for React by yourself. Just import @reatom/react-v2/react-dom-batched-updates or @reatom/react-v2/react-native-batched-updates on the top (root) of your project to make it work before any hook call.

import '@reatom/react-v2/react-dom-batched-updates'


Connects the atom to the store represented in context and returns the state of the atom from the store (or default atom state).

Basic (useAtom)

const [data] = useAtom(dataAtom)

Depended value by selector

const [propAtom] = useMemo(
  () => createAtom({ dataAtom }, ({ get }) => get('dataAtom')[]),
const [propValue] = useAtom(propAtom)


Binds action with dispatch to the store provided in the context.

Basic (useAction)

const handleUpdateData = useAction(dataAtom.update)

Prepare payload for dispatch

const handleUpdateData = useAction(
  (value) => dataAtom.update({ id:, value }),

Conditional dispatch

If action creator don’t return an action dispatch not calling.

const handleUpdateData = useAction((payload) => {
  if (condition) return dataAtom.update(payload)
}, [])


Step 0 - OPTIONAL. Create store.

This step is required only for SSR, when one node.js process may handle a few requests at the time.

// App

import React from 'react'
import { createStore } from '@reatom/core-v2'
import { reatomContext } from '@reatom/react-v2'
import { Form } from './components/Form'

import './App.css'

export const App = () => {
  // create statefull reatomContext for atoms execution
  const store = createStore()

  return (
    <div className="App">
      <reatomContext.Provider value={store}>
        <Form />

Step 1. Bind your atoms.

// components/Form

import { createPrimitiveAtom } from '@reatom/core-v2/primitives'
import { useAtom } from '@reatom/react-v2'

const nameAtom = createPrimitiveAtom('', {
  onChange: (state, e) => e.currentTarget.value,

export const Form = () => {
  const [name, { onChange }] = useAtom(nameAtom)

  return (
      <label htmlFor="name">Enter your name</label>
      <input id="name" value={name} onChange={onChange} />

Step 3. You are gorgeous