# useAtom \[Two-way binding for any IAtom] `useAtom` binds any `IAtom` (a plain `Atom`, a field [`Lens`](/rxfy/create-lens), or a `ModelStore.get(id)` handle) to React as `[value, setValue]`. Combined with `store.get(id)` and `keyLens`, it gives two-way form binding that stays in sync across every component subscribed to that entity: ```tsx import { useMemo } from "react"; import { createLens, keyLens } from "rxfy"; import { useAtom, useModelStore } from "rxfy-react"; import { TodoModel } from "./models"; function EditTitle({ id }: { id: string }) { const store = useModelStore(TodoModel); const todo$ = store.get(id); // IAtom — the entity's cell, stable across renders const title$ = useMemo(() => createLens(todo$, keyLens("title")), [todo$]); const [title, setTitle] = useAtom(title$); return setTitle(e.target.value)} />; } ``` Typing writes through the field `Lens` into the model store's entity cell, so the edit reaches every other subscriber of that todo (a list row, a detail header) with no re-fetch. `store.get(id)` assumes the entity is already loaded and throws otherwise (see [Model](/rxfy/create-model#modelstore-get)). ```ts function useAtom(atom$: IAtom): [T, (value: T) => void]; ``` The `IAtom` it accepts is the writable reactive cell: ```ts type IAtom = Observable & { get(): T; // synchronous read set(val: T): void; // overwrite the value modify(fn: (val: T) => T): void; // functional update }; ``` See [Atom](/rxfy/create-atom) for the full reference. :::warning `atom$` must be referentially stable across renders. `store.get(id)` already returns the same cell every call; atoms you derive yourself (a `Lens`, a `createAtom` draft) must be wrapped in `useMemo` as above. :::