diff --git a/docs/core/atom.mdx b/docs/core/atom.mdx index 8db98a6cee..6bb0aaba71 100644 --- a/docs/core/atom.mdx +++ b/docs/core/atom.mdx @@ -38,6 +38,10 @@ const writeOnlyAtom = atom( (get, set, update) => { // `update` is any single value we receive for updating this atom set(priceAtom, get(priceAtom) - update.discount) + // or we can pass a function as the second parameter + // the function will be invoked, + // receiving the atom's current value as its first parameter + set(priceAtom, (price) => price - update.discount) }, ) const readWriteAtom = atom( @@ -79,24 +83,24 @@ const Component = ({ value }) => { function atom(initialValue: Value): PrimitiveAtom // read-only atom -function atom(read: (get: Getter) => Value | Promise): Atom +function atom(read: (get: Getter) => Value): Atom // writable derived atom -function atom( - read: (get: Getter) => Value | Promise, - write: (get: Getter, set: Setter, update: Update) => void | Promise, -): WritableAtom +function atom( + read: (get: Getter) => Value, + write: (get: Getter, set: Setter, ...args: Args) => Result, +): WritableAtom // write-only derived atom -function atom( +function atom( read: Value, - write: (get: Getter, set: Setter, update: Update) => void | Promise, -): WritableAtom + write: (get: Getter, set: Setter, ...args: Args) => Result, +): WritableAtom ``` - `initialValue`: the initial value that the atom will return until its value is changed. -- `read`: a function that's called on every re-render. The signature of `read` is `(get) => Value | Promise`, and `get` is a function that takes an atom config and returns its value stored in Provider as described below. Dependency is tracked, so if `get` is used for an atom at least once, the `read` will be reevaluated whenever the atom value is changed. -- `write`: a function mostly used for mutating atom's values, for a better description; it gets called whenever we call the second value of the returned pair of `useAtom`, the `useAtom()[1]`. The default value of this function in the primitive atom will change the value of that atom. The signature of `write` is `(get, set, update) => void | Promise`. `get` is similar to the one described above, but it doesn't track the dependency. `set` is a function that takes an atom config and a new value which then updates the atom value in Provider. `update` is an arbitrary value that we receive from the updating function returned by `useAtom` described below. +- `read`: a function that's evaluated whenever the atom is read. The signature of `read` is `(get) => Value`, and `get` is a function that takes an atom config and returns its value stored in Provider as described below. Dependency is tracked, so if `get` is used for an atom at least once, the `read` will be reevaluated whenever the atom value is changed. +- `write`: a function mostly used for mutating atom's values, for a better description; it gets called whenever we call the second value of the returned pair of `useAtom`, the `useAtom()[1]`. The default value of this function in the primitive atom will change the value of that atom. The signature of `write` is `(get, set, ...args) => Result`. `get` is similar to the one described above, but it doesn't track the dependency. `set` is a function that takes an atom config and a new value which then updates the atom value in Provider. `...args` is the arguments that we receive when we call `useAtom()[1]`. `Result` is the return value of the `write` function. ```js const primitiveAtom = atom(initialValue) @@ -117,7 +121,10 @@ Note: While, the debug labels don’t have to be unique, it’s generally recomm The created atom config can have an optional property `onMount`. `onMount` is a function which takes a function `setAtom` and returns `onUnmount` function optionally. -The `onMount` function is called when the atom is first used in a provider, and `onUnmount` is called when it’s no longer used. In some edge cases, an atom can be unmounted and then mounted immediately. +The `onMount` function is called when the atom is subscribed in the provider in the first time, +and `onUnmount` is called when it’s no longer subscribed. +In some cases (like [React strict mode](https://react.dev/reference/react/StrictMode)), +an atom can be unmounted and then mounted immediately. ```js const anAtom = atom(1) @@ -126,6 +133,20 @@ anAtom.onMount = (setAtom) => { setAtom(c => c + 1) // increment count on mount return () => { ... } // return optional onUnmount function } + +const Component = () => { + // `onMount` will be called when the component is mounted in the following cases: + useAtom(anAtom) + useAtomValue(anAtom) + + // however, in the following cases, + // `onMount` will not be called because the atom is not subscribed: + useSetAtom(anAtom) + useAtomCallback( + useCallback((get) => get(anAtom), []), + ) + // ... +} ``` Calling `setAtom` function will invoke the atom’s `write`. Customizing `write` allows changing the behavior.