-
-
Notifications
You must be signed in to change notification settings - Fork 635
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: update atom.mdx
#2271
Merged
Merged
docs: update atom.mdx
#2271
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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<Value>(initialValue: Value): PrimitiveAtom<Value> | ||
|
||
// read-only atom | ||
function atom<Value>(read: (get: Getter) => Value | Promise<Value>): Atom<Value> | ||
function atom<Value>(read: (get: Getter) => Value): Atom<Value> | ||
|
||
// writable derived atom | ||
function atom<Value, Update>( | ||
read: (get: Getter) => Value | Promise<Value>, | ||
write: (get: Getter, set: Setter, update: Update) => void | Promise<void>, | ||
): WritableAtom<Value, Update> | ||
function atom<Value, Args extends unknown[], Result>( | ||
read: (get: Getter) => Value, | ||
write: (get: Getter, set: Setter, ...args: Args) => Result, | ||
): WritableAtom<Value, Args, Result> | ||
|
||
// write-only derived atom | ||
function atom<Value, Update>( | ||
function atom<Value, Args extends unknown[], Result>( | ||
read: Value, | ||
write: (get: Getter, set: Setter, update: Update) => void | Promise<void>, | ||
): WritableAtom<Value, Update> | ||
write: (get: Getter, set: Setter, ...args: Args) => Result, | ||
): WritableAtom<Value, Args, Result> | ||
``` | ||
|
||
- `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<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, update) => void | Promise<void>`. `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( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
useCallback((get) => get(anAtom), []), | ||
) | ||
// ... | ||
} | ||
``` | ||
|
||
Calling `setAtom` function will invoke the atom’s `write`. Customizing `write` allows changing the behavior. | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
called on every re-render
is incorrect. Atom's read will be only called once if it's a pure function likeatom(() => 1).