From 1731571acbc7b164625d9e9ae3fefaebd0ce6dec Mon Sep 17 00:00:00 2001 From: ldH Date: Fri, 28 Apr 2023 13:59:53 +0900 Subject: [PATCH] update new React Docs --- docs/blog/2020-06-18-0.0.10-released.md | 2 +- docs/blog/2022-01-28-0.6.0-release.md | 4 ++-- docs/docs/api-reference/core/useRecoilCallback.md | 4 ++-- docs/docs/api-reference/core/useRecoilState.md | 2 +- docs/docs/api-reference/core/useRecoilStateLoadable.md | 2 +- docs/docs/api-reference/core/useRecoilTransaction.md | 2 +- docs/docs/api-reference/core/useRecoilValueLoadable.md | 2 +- docs/docs/basic-tutorial/performance.md | 2 +- docs/docs/guides/asynchronous-data-queries.md | 4 ++-- docs/docs/guides/atom-effects.md | 4 ++-- docs/docs/guides/transitions.md | 2 +- .../current/api-reference/core/useRecoilCallback.md | 4 ++-- .../current/api-reference/core/useRecoilState.md | 2 +- .../current/api-reference/core/useRecoilStateLoadable.md | 2 +- .../current/api-reference/core/useRecoilValueLoadable.md | 2 +- .../current/basic-tutorial/performance.md | 2 +- .../current/guides/asynchronous-data-queries.md | 4 ++-- .../current/api-reference/core/RecoilEnv.md | 4 ++-- .../current/api-reference/core/useRecoilCallback.md | 4 ++-- .../current/api-reference/core/useRecoilState.md | 2 +- .../current/api-reference/core/useRecoilStateLoadable.md | 2 +- .../current/api-reference/core/useRecoilTransaction.md | 2 +- .../current/api-reference/core/useRecoilValueLoadable.md | 2 +- .../current/basic-tutorial/performance.md | 2 +- .../current/guides/asynchronous-data-queries.md | 4 ++-- .../current/guides/atom-effects.md | 2 +- .../current/guides/transitions.md | 2 +- .../current/api-reference/core/useRecoilCallback.md | 4 ++-- .../current/api-reference/core/useRecoilState.md | 2 +- .../current/api-reference/core/useRecoilStateLoadable.md | 2 +- .../current/api-reference/core/useRecoilValueLoadable.md | 2 +- .../current/basic-tutorial/performance.md | 2 +- .../current/guides/asynchronous-data-queries.md | 4 ++-- 33 files changed, 44 insertions(+), 44 deletions(-) diff --git a/docs/blog/2020-06-18-0.0.10-released.md b/docs/blog/2020-06-18-0.0.10-released.md index 738da0dca..566d7d33b 100644 --- a/docs/blog/2020-06-18-0.0.10-released.md +++ b/docs/blog/2020-06-18-0.0.10-released.md @@ -118,7 +118,7 @@ function useRecoilCallback( ): (...Args) => ReturnValue ``` -The `useRecoilCallback()` hook is similar to the React [`useCallback()`](https://reactjs.org/docs/hooks-reference.html#usecallback) hook for producing a callback function. But, instead of just providing an input callback function you wrap it with a function providing a callback interface parameter that gives you access to a `Snapshot` and `set()`/`reset()` callbacks to update the current global state. The provided `Snapshot` represents the state when the callback is called, not when the callback function was originally created. +The `useRecoilCallback()` hook is similar to the React [`useCallback()`](https://react.dev/reference/react/useCallback) hook for producing a callback function. But, instead of just providing an input callback function you wrap it with a function providing a callback interface parameter that gives you access to a `Snapshot` and `set()`/`reset()` callbacks to update the current global state. The provided `Snapshot` represents the state when the callback is called, not when the callback function was originally created. NOTE: This is a slight breaking change in the API, but we are still on version `0.0.x` of Recoil and haven’t fully started semantic versioning yet. diff --git a/docs/blog/2022-01-28-0.6.0-release.md b/docs/blog/2022-01-28-0.6.0-release.md index 65f416592..fedbf095a 100644 --- a/docs/blog/2022-01-28-0.6.0-release.md +++ b/docs/blog/2022-01-28-0.6.0-release.md @@ -8,11 +8,11 @@ Recoil 0.6 introduces improved support for React 18, including concurrent render ## React 18 -Recoil 0.6 uses the latest APIs from React 18 for improved safety and performance. This release is compatible with [concurrent rendering](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html#whats-coming-in-react-18) and [``](https://reactjs.org/docs/strict-mode.html), which is useful for testing and identifying potential issues for concurrent rendering. Making Recoil and React state changes in the same batch now stay in sync to provided a consistent view of state. Some of these improvements are also available while using previous versions of React. *When experimenting with React 18 please use the latest RC build, as the original React `18.0.0-rc.0` package has a bug that has since been fixed.* +Recoil 0.6 uses the latest APIs from React 18 for improved safety and performance. This release is compatible with [concurrent rendering](https://react.dev/blog/2021/06/08/the-plan-for-react-18#whats-coming-in-react-18) and [``](https://react.dev/reference/react/StrictMode), which is useful for testing and identifying potential issues for concurrent rendering. Making Recoil and React state changes in the same batch now stay in sync to provided a consistent view of state. Some of these improvements are also available while using previous versions of React. *When experimenting with React 18 please use the latest RC build, as the original React `18.0.0-rc.0` package has a bug that has since been fixed.* ### Concurrent Rendering and Transitions -React 18 offers a new hook [`useTransition()`](https://reactjs.org/docs/concurrent-mode-patterns.html#transitions) for transitioning to a new state while having control over what to render before the new state is ready. Recoil should be compatible with this approach and provides a consistent view with React state. However, React 18 may fallback from concurrent updates and does not yet officially support initiating transitions based on state changes to external stores. This is something the React team is looking into supporting, but until then we have added experimental support for this through the following hooks. This API is considered experimental because there may be use cases we haven’t found which are not handled. +React 18 offers a new hook [`useTransition()`](https://react.dev/reference/react/useTransition) for transitioning to a new state while having control over what to render before the new state is ready. Recoil should be compatible with this approach and provides a consistent view with React state. However, React 18 may fallback from concurrent updates and does not yet officially support initiating transitions based on state changes to external stores. This is something the React team is looking into supporting, but until then we have added experimental support for this through the following hooks. This API is considered experimental because there may be use cases we haven’t found which are not handled. * `useRecoilState_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()` * `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` diff --git a/docs/docs/api-reference/core/useRecoilCallback.md b/docs/docs/api-reference/core/useRecoilCallback.md index 150536d56..38094f43d 100644 --- a/docs/docs/api-reference/core/useRecoilCallback.md +++ b/docs/docs/api-reference/core/useRecoilCallback.md @@ -3,7 +3,7 @@ title: useRecoilCallback(callback, deps) sidebar_label: useRecoilCallback() --- -This hook is similar to [*`useCallback()`*](https://reactjs.org/docs/hooks-reference.html#usecallback), but will also provide an API for your callbacks to work with Recoil state. This hook can be used to construct a callback that has access to a read-only [`Snapshot`](/docs/api-reference/core/Snapshot) of Recoil state and the ability to asynchronously update current Recoil state. +This hook is similar to [*`useCallback()`*](https://react.dev/reference/react/useCallback), but will also provide an API for your callbacks to work with Recoil state. This hook can be used to construct a callback that has access to a read-only [`Snapshot`](/docs/api-reference/core/Snapshot) of Recoil state and the ability to asynchronously update current Recoil state. Some motivations for using this hook may include: * Asynchronously read Recoil state without subscribing a React component to re-render if the atom or selector is updated. @@ -31,7 +31,7 @@ function useRecoilCallback( ``` * **`callback`** - The user callback function with a wrapper function that provides a callback interface. Callbacks to change the state will be queued to asynchronously update the current Recoil state. The type signature of the wrapped function matches the type signature of the returned callback. -* **`deps`** - An optional set of dependencies for memoizing the callback. Like `useCallback()`, the produced callback will not be memoized by default and will produce a new function with each render. You can pass an empty array to always return the same function instance. If you pass values in the `deps` array a new function will be used if the reference equality of any dep changes. Those values can then be used from within the body of your callback without getting stale. (See [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)) You can [update eslint](/docs/introduction/installation#eslint) to help ensure this is used correctly. +* **`deps`** - An optional set of dependencies for memoizing the callback. Like `useCallback()`, the produced callback will not be memoized by default and will produce a new function with each render. You can pass an empty array to always return the same function instance. If you pass values in the `deps` array a new function will be used if the reference equality of any dep changes. Those values can then be used from within the body of your callback without getting stale. (See [`useCallback`](https://react.dev/reference/react/useCallback)) You can [update eslint](/docs/introduction/installation#eslint) to help ensure this is used correctly. ### Callback Interface * **`snapshot`** - The [`Snapshot`](/docs/api-reference/core/Snapshot) provides a read-only look at the Recoil atom state when the snapshot was accessed. While the atom values are static, asynchronous selectors may still resolve. Snapshots will be retained for the duration of sync or async callbacks, but if you store and use it beyond that scope then you need to [explicitly retain it](/docs/api-reference/core/Snapshot#asynchronous-use-of-snapshots). diff --git a/docs/docs/api-reference/core/useRecoilState.md b/docs/docs/api-reference/core/useRecoilState.md index 26f5d611c..14dad6cf5 100644 --- a/docs/docs/api-reference/core/useRecoilState.md +++ b/docs/docs/api-reference/core/useRecoilState.md @@ -19,7 +19,7 @@ type SetterOrUpdater = (T | (T => T)) => void; - `state`: an [`atom`](/docs/api-reference/core/atom) or a _writeable_ [`selector`](/docs/api-reference/core/selector). Writeable selectors are selectors that have both a `get` and `set` in their definition while read-only selectors only have a `get`. -This API is similar to the React [`useState()`](https://reactjs.org/docs/hooks-reference.html#usestate) hook except it takes a Recoil state instead of a default value as an argument. It returns a tuple of the current value of the state and a setter function. The setter function may either take a new value as an argument or an updater function which receives the previous value as a parameter. +This API is similar to the React [`useState()`](https://react.dev/reference/react/useState) hook except it takes a Recoil state instead of a default value as an argument. It returns a tuple of the current value of the state and a setter function. The setter function may either take a new value as an argument or an updater function which receives the previous value as a parameter. --- diff --git a/docs/docs/api-reference/core/useRecoilStateLoadable.md b/docs/docs/api-reference/core/useRecoilStateLoadable.md index a1fdb8aff..8b2ea4c69 100644 --- a/docs/docs/api-reference/core/useRecoilStateLoadable.md +++ b/docs/docs/api-reference/core/useRecoilStateLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilStateLoadable() This hook is intended to be used for reading the value of asynchronous selectors. This hook will implicitly subscribe the component to the given state. -Unlike [`useRecoilState()`](/docs/api-reference/core/useRecoilState), this hook will not throw an `Error` or `Promise` when reading from an asynchronous selector (for the purpose of working alongside [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)). Instead, this hook returns a [`Loadable`](/docs/api-reference/core/Loadable) object for the value along with the setter callback. +Unlike [`useRecoilState()`](/docs/api-reference/core/useRecoilState), this hook will not throw an `Error` or `Promise` when reading from an asynchronous selector (for the purpose of working alongside [React Suspense](https://react.dev/reference/react/Suspense)). Instead, this hook returns a [`Loadable`](/docs/api-reference/core/Loadable) object for the value along with the setter callback. --- diff --git a/docs/docs/api-reference/core/useRecoilTransaction.md b/docs/docs/api-reference/core/useRecoilTransaction.md index ae9b44425..518f82504 100644 --- a/docs/docs/api-reference/core/useRecoilTransaction.md +++ b/docs/docs/api-reference/core/useRecoilTransaction.md @@ -26,7 +26,7 @@ function useRecoilTransaction_UNSTABLE( ``` * **`callback`** - User callback function with a wrapper function that provides the transaction interface. ***This function must be pure without any side-effects.*** -* **`deps`** - An optional set of dependencies for memoizing the callback. Like `useCallback()`, the produced transaction callback will not be memoized by default and will produce a new function with each render. You can pass an empty array to always return the same function instance. If you pass values in the `deps` array, a new function will be used if the reference equality of any dep changes. Those values can then be used from within the body of your callback without getting stale. (See [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)) You can [update eslint](/docs/introduction/installation#eslint) to help ensure this is used correctly. +* **`deps`** - An optional set of dependencies for memoizing the callback. Like `useCallback()`, the produced transaction callback will not be memoized by default and will produce a new function with each render. You can pass an empty array to always return the same function instance. If you pass values in the `deps` array, a new function will be used if the reference equality of any dep changes. Those values can then be used from within the body of your callback without getting stale. (See [`useCallback`](https://react.dev/reference/react/useCallback)) You can [update eslint](/docs/introduction/installation#eslint) to help ensure this is used correctly. Transaction Interface: * **`get`** - Get the current value for the requested Recoil state, reflecting any writes performed earlier in the transaction. This currently only supports synchronous atoms. diff --git a/docs/docs/api-reference/core/useRecoilValueLoadable.md b/docs/docs/api-reference/core/useRecoilValueLoadable.md index 2fea7e4e2..98ecdda89 100644 --- a/docs/docs/api-reference/core/useRecoilValueLoadable.md +++ b/docs/docs/api-reference/core/useRecoilValueLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilValueLoadable() This hook is intended to be used for reading the value of asynchronous selectors. This hook will subscribe the component to the given state. -Unlike [`useRecoilValue()`](/docs/api-reference/core/useRecoilValue), this hook will not throw an `Error` or `Promise` when reading from an asynchronous selector (for the purpose of using [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)). Instead, this hook returns a [`Loadable`](/docs/api-reference/core/Loadable) object. +Unlike [`useRecoilValue()`](/docs/api-reference/core/useRecoilValue), this hook will not throw an `Error` or `Promise` when reading from an asynchronous selector (for the purpose of using [React Suspense](https://react.dev/reference/react/Suspense)). Instead, this hook returns a [`Loadable`](/docs/api-reference/core/Loadable) object. Use `useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()` for experimental support for [React 18 transitions](/docs/guides/transitions) based on mutating Recoil state. diff --git a/docs/docs/basic-tutorial/performance.md b/docs/docs/basic-tutorial/performance.md index 5195f09f0..963b44845 100644 --- a/docs/docs/basic-tutorial/performance.md +++ b/docs/docs/basic-tutorial/performance.md @@ -37,7 +37,7 @@ Ideally, components would re-render only when they absolutely have to (when the ## Optimization #1: `React.memo()` -To mitigate the issue of child components re-rendering unnecessarily, we can make use of [`React.memo()`](https://reactjs.org/docs/react-api.html#reactmemo), which memoizes a component based on the **props** passed to that component: +To mitigate the issue of child components re-rendering unnecessarily, we can make use of [`React.memo()`](https://react.dev/reference/react/memo), which memoizes a component based on the **props** passed to that component: ```js const TodoItem = React.memo(({item}) => ...); diff --git a/docs/docs/guides/asynchronous-data-queries.md b/docs/docs/guides/asynchronous-data-queries.md index e4a103056..096c38017 100644 --- a/docs/docs/guides/asynchronous-data-queries.md +++ b/docs/docs/guides/asynchronous-data-queries.md @@ -61,7 +61,7 @@ function CurrentUserInfo() { The interface of the selector is the same, so the component using this selector doesn't need to care if it was backed with synchronous atom state, derived selector state, or asynchronous queries! -But, since React render functions are synchronous, what will it render before the promise resolves? Recoil is designed to work with [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) to handle pending data. Wrapping your component with a Suspense boundary will catch any descendants that are still pending and render a fallback UI: +But, since React render functions are synchronous, what will it render before the promise resolves? Recoil is designed to work with [React Suspense](https://react.dev/reference/react/Suspense) to handle pending data. Wrapping your component with a Suspense boundary will catch any descendants that are still pending and render a fallback UI: ```jsx function MyApp() { @@ -77,7 +77,7 @@ function MyApp() { ## Error Handling -But what if the request has an error? Recoil selectors can also throw errors which will then be thrown if a component tries to use that value. This can be caught with a React [``](https://reactjs.org/docs/error-boundaries.html). For example: +But what if the request has an error? Recoil selectors can also throw errors which will then be thrown if a component tries to use that value. This can be caught with a React [``](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary). For example: ```jsx const currentUserNameQuery = selector({ diff --git a/docs/docs/guides/atom-effects.md b/docs/docs/guides/atom-effects.md index e4e79ae7e..18ed736ce 100644 --- a/docs/docs/guides/atom-effects.md +++ b/docs/docs/guides/atom-effects.md @@ -3,7 +3,7 @@ title: Atom Effects sidebar_label: Atom Effects --- -Atom effects are an API for managing side-effects and synchronizing or initializing Recoil atoms. They have a variety of useful applications such as state persistence, state synchronization, managing history, logging, &c. They are similar to [React effects](https://reactjs.org/docs/hooks-effect.html), but are defined as part of the atom definition, so each atom can specify and compose their own policies. Also check out the [**`recoil-sync`**](/docs/recoil-sync/introduction) library for some implementations of syncing (such as [**URL persistence**](/docs/recoil-sync/url-persistence)) or more advanced use cases. +Atom effects are an API for managing side-effects and synchronizing or initializing Recoil atoms. They have a variety of useful applications such as state persistence, state synchronization, managing history, logging, &c. They are similar to [React effects](https://react.dev/learn/synchronizing-with-effects), but are defined as part of the atom definition, so each atom can specify and compose their own policies. Also check out the [**`recoil-sync`**](/docs/recoil-sync/introduction) library for some implementations of syncing (such as [**URL persistence**](/docs/recoil-sync/url-persistence)) or more advanced use cases. An *atom effect* is a *function* with the following definition. @@ -78,7 +78,7 @@ See [`useGetRecoilValueInfo()`](/docs/api-reference/core/useGetRecoilValueInfo) ### Compared to React Effects -Atom effects could mostly be implemented via React [`useEffect()`](https://reactjs.org/docs/hooks-reference.html#useeffect). However, the set of atoms are created outside of a React context, and it can be difficult to manage effects from within React components, particularly for dynamically created atoms. They also cannot be used to initialize the initial atom value or be used with server-side rendering. Using atom effects also co-locates the effects with the atom definitions. +Atom effects could mostly be implemented via React [`useEffect()`](https://react.dev/reference/react/useEffect). However, the set of atoms are created outside of a React context, and it can be difficult to manage effects from within React components, particularly for dynamically created atoms. They also cannot be used to initialize the initial atom value or be used with server-side rendering. Using atom effects also co-locates the effects with the atom definitions. ```jsx const myState = atom({key: 'Key', default: null}); diff --git a/docs/docs/guides/transitions.md b/docs/docs/guides/transitions.md index 33c9cff44..607b8113e 100644 --- a/docs/docs/guides/transitions.md +++ b/docs/docs/guides/transitions.md @@ -3,7 +3,7 @@ title: React 18 Transitions sidebar_label: Transitions --- -[React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) offers a new hook [**`useTransition()`**](https://react.dev/reference/react/useTransition) for transitioning to a new state while having control over what to render before the new state is ready. Recoil should be compatible with this approach and provides a consistent view with React state. However, React 18 may fallback from concurrent updates and does not yet officially support initiating transitions based on state changes to external stores. This is something the React team is looking into supporting, but until then we have added experimental support for this through the following hooks; other hooks should already fully support transitions, so only these variants are necessary. This API is considered experimental because there may be use cases we haven’t found which are not handled. +[React 18](https://react.dev/blog/2021/06/08/the-plan-for-react-18) offers a new hook [**`useTransition()`**](https://react.dev/reference/react/useTransition) for transitioning to a new state while having control over what to render before the new state is ready. Recoil should be compatible with this approach and provides a consistent view with React state. However, React 18 may fallback from concurrent updates and does not yet officially support initiating transitions based on state changes to external stores. This is something the React team is looking into supporting, but until then we have added experimental support for this through the following hooks; other hooks should already fully support transitions, so only these variants are necessary. This API is considered experimental because there may be use cases we haven’t found which are not handled. - **`useRecoilState_TRANSITION_SUPPORT_UNSTABLE()`** - **`useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()`** diff --git a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md index 52a827a35..45a8dbb8e 100644 --- a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md +++ b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md @@ -3,7 +3,7 @@ title: useRecoilCallback(callback, deps) sidebar_label: useRecoilCallback() --- -Ce hook est similaire à [*`useCallback()`*](https://reactjs.org/docs/hooks-reference.html#usecallback), mais fournira également une API pour que vos rappels fonctionnent avec l'état Recoil. Ce hook peut être utilisé pour construire un callback qui a accès à un [`Snapshot`](/docs/api-reference/core/Snapshot) en lecture seule de l'état Recoil et la possibilité de mettre à jour de manière asynchrone l'état Recoil actuel. +Ce hook est similaire à [*`useCallback()`*](https://react.dev/reference/react/useCallback), mais fournira également une API pour que vos rappels fonctionnent avec l'état Recoil. Ce hook peut être utilisé pour construire un callback qui a accès à un [`Snapshot`](/docs/api-reference/core/Snapshot) en lecture seule de l'état Recoil et la possibilité de mettre à jour de manière asynchrone l'état Recoil actuel. Certaines motivations pour utiliser ce crochet peuvent inclure: * Lire l'état Recoil de manière asynchrone sans souscrire à un composant React pour effectuer un nouveau rendu si l'atome ou le sélecteur est mis à jour. @@ -29,7 +29,7 @@ function useRecoilCallback( ``` * **`callback`** - La fonction de rappel utilisateur avec une fonction wrapper qui fournit une interface de rappel. Les rappels pour changer l'état seront mis en file d'attente pour mettre à jour de manière asynchrone l'état Recoil actuel. La signature de type de la fonction encapsulée correspond à la signature de type du rappel renvoyé. -* **`deps`** - Un ensemble optionnel de dépendances pour mémoriser le rappel. Comme `useCallback()`, le callback produit ne sera pas mémorisé par défaut et produira une nouvelle fonction à chaque rendu. Vous pouvez transmettre un tableau vide pour toujours renvoyer la même instance de fonction. Si vous passez des valeurs dans le tableau `deps`, une nouvelle fonction sera utilisée si l'égalité de référence de tout dep change. Ces valeurs peuvent ensuite être utilisées à partir du corps de votre rappel sans devenir obsolètes. (Voir [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)) Vous pouvez [mettre à jour eslint](/docs/introduction/installation#eslint) pour vous assurer qu'il est utilisé correctement . +* **`deps`** - Un ensemble optionnel de dépendances pour mémoriser le rappel. Comme `useCallback()`, le callback produit ne sera pas mémorisé par défaut et produira une nouvelle fonction à chaque rendu. Vous pouvez transmettre un tableau vide pour toujours renvoyer la même instance de fonction. Si vous passez des valeurs dans le tableau `deps`, une nouvelle fonction sera utilisée si l'égalité de référence de tout dep change. Ces valeurs peuvent ensuite être utilisées à partir du corps de votre rappel sans devenir obsolètes. (Voir [`useCallback`](https://react.dev/reference/react/useCallback)) Vous pouvez [mettre à jour eslint](/docs/introduction/installation#eslint) pour vous assurer qu'il est utilisé correctement . Interface de rappel: * **`snapshot`** - Le [`Snapshot`](/docs/api-reference/core/Snapshot) fournit un aperçu en lecture seule de l'état de l'atome Recoil engagé avec un lot React lorsque la transaction actuelle, le rappel est appelé de commencé. Alors que les valeurs d'atome sont statiques, les sélecteurs asynchrones peuvent encore être en attente ou être résolus. diff --git a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md index 23c75ac70..bb0d0f6e1 100644 --- a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md +++ b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md @@ -17,7 +17,7 @@ type SetterOrUpdater = (T | (T => T)) => void; - `state`: un [`atome`](/docs/api-reference/core/atom) ou un [`selecteur`](/docs/api-reference/core/selector) _inscriptible_. Les sélecteurs inscriptibles sont des sélecteurs qui ont à la fois un `get` et un `set` dans leur définition tandis que les sélecteurs en lecture seule n'ont qu'un `get`. -Cette API est similaire au hook React [`useState()`](https://reactjs.org/docs/hooks-reference.html#usestate) sauf qu'il prend un état Recoil au lieu d'une valeur par défaut comme argument. Il retourne un tuple de la valeur actuelle de l'état et une fonction de définition. La fonction de définition peut prendre une nouvelle valeur comme argument ou une fonction de mise à jour qui reçoit la valeur précédente en tant que paramètre. +Cette API est similaire au hook React [`useState()`](https://react.dev/reference/react/useState) sauf qu'il prend un état Recoil au lieu d'une valeur par défaut comme argument. Il retourne un tuple de la valeur actuelle de l'état et une fonction de définition. La fonction de définition peut prendre une nouvelle valeur comme argument ou une fonction de mise à jour qui reçoit la valeur précédente en tant que paramètre. --- diff --git a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md index 2cae7d3ca..7c773d605 100644 --- a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md +++ b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilStateLoadable() Ce hook est destiné à être utilisé pour lire la valeur des sélecteurs asynchrones. Ce hook abonnera implicitement le composant à l'état donné. -Contrairement à [`useRecoilState()`](/docs/api-reference/core/useRecoilState), ce hook ne lancera pas une `Error` ou une `Promise` lors de la lecture à partir d'un sélecteur asynchrone (dans le but de travailler avec [React Suspense ] (https://reactjs.org/docs/concurrent-mode-suspense.html)). Au lieu de cela, ce hook renvoie un objet [`Loadable`](/docs/api-reference/core/Loadable) pour la valeur avec le rappel du setter. +Contrairement à [`useRecoilState()`](/docs/api-reference/core/useRecoilState), ce hook ne lancera pas une `Error` ou une `Promise` lors de la lecture à partir d'un sélecteur asynchrone (dans le but de travailler avec [React Suspense ] (https://react.dev/reference/react/Suspense)). Au lieu de cela, ce hook renvoie un objet [`Loadable`](/docs/api-reference/core/Loadable) pour la valeur avec le rappel du setter. --- diff --git a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md index fd9aab39f..05466f30b 100644 --- a/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md +++ b/docs/i18n/fr/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilValueLoadable() Ce hook est destiné à être utilisé pour lire la valeur des sélecteurs asynchrones. Ce hook abonnera implicitement le composant à l'état donné. -Contrairement à [`useRecoilValue()`](/docs/api-reference/core/useRecoilValue), ce hook ne lancera pas une `Error` ou une `Promise` lors de la lecture à partir d'un sélecteur asynchrone (dans le but de travailler avec [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)). Au lieu de cela, ce hook renvoie un objet [`Loadable`](/docs/api-reference/core/Loadable). +Contrairement à [`useRecoilValue()`](/docs/api-reference/core/useRecoilValue), ce hook ne lancera pas une `Error` ou une `Promise` lors de la lecture à partir d'un sélecteur asynchrone (dans le but de travailler avec [React Suspense](https://react.dev/reference/react/Suspense)). Au lieu de cela, ce hook renvoie un objet [`Loadable`](/docs/api-reference/core/Loadable). --- diff --git a/docs/i18n/fr/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md b/docs/i18n/fr/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md index a53845c72..1dc06fbb0 100644 --- a/docs/i18n/fr/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md +++ b/docs/i18n/fr/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md @@ -37,7 +37,7 @@ Dans l'idéal, les composants ne seraient re-rendu que lorsqu'ils doivent absolu ## Optimisation # 1: `React.memo ()` -Pour atténuer le problème du ré-rendu des composants enfants inutilement, nous pouvons utiliser [`React.memo()`] (https://reactjs.org/docs/react-api.html#reactmemo), qui mémorise un composant basé sur les **props** passés à ce composant: +Pour atténuer le problème du ré-rendu des composants enfants inutilement, nous pouvons utiliser [`React.memo()`] (https://react.dev/reference/react/memo), qui mémorise un composant basé sur les **props** passés à ce composant: ```js const TodoItem = React.memo(({item}) => ...); diff --git a/docs/i18n/fr/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md b/docs/i18n/fr/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md index 97829861e..82e2b8cbf 100644 --- a/docs/i18n/fr/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md +++ b/docs/i18n/fr/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md @@ -61,7 +61,7 @@ function CurrentUserInfo() { L'interface du sélecteur est la même, donc le composant utilisant ce sélecteur n'a pas besoin de se soucier si la value provient d'un état d'atome synchrone, d'un état de sélecteur dérivé ou de requêtes asynchrones! -Mais, puisque les fonctions de rendu de React sont synchrones, que rendront-t-elles avant la résolution de la promesse? Recoil est conçu pour fonctionner avec [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) pour gérer les données en attente. Envelopper votre composant avec une limite `Suspense` interceptera tous les descendants qui sont toujours en attente et rendra une interface utilisateur de secours: +Mais, puisque les fonctions de rendu de React sont synchrones, que rendront-t-elles avant la résolution de la promesse? Recoil est conçu pour fonctionner avec [React Suspense](https://react.dev/reference/react/Suspense) pour gérer les données en attente. Envelopper votre composant avec une limite `Suspense` interceptera tous les descendants qui sont toujours en attente et rendra une interface utilisateur de secours: ```jsx function MonApplication() { @@ -77,7 +77,7 @@ function MonApplication() { ## La gestion d'erreurs -Mais que faire si la demande à échouée ou contient une erreur? Les sélecteurs Recoil peuvent également générer des erreurs qui seront ensuite lancées si un composant tente d'utiliser cette valeur. Cela peut être intercepté avec un React [``](https://reactjs.org/docs/error-boundaries.html). Par exemple: +Mais que faire si la demande à échouée ou contient une erreur? Les sélecteurs Recoil peuvent également générer des erreurs qui seront ensuite lancées si un composant tente d'utiliser cette valeur. Cela peut être intercepté avec un React [``](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Par exemple: ```jsx const currentUserNameQuery = selector({ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/RecoilEnv.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/RecoilEnv.md index 8fc795a33..9740bb818 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/RecoilEnv.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/RecoilEnv.md @@ -15,10 +15,10 @@ sidebar_label: RecoilEnv 사용 가능한 플래그 목록 일부: * `recoil_hamt_2020` (기본적으로 활성화됨) - `Map` 구현을 [hash array mapped trie](https://en.wikipedia.org/wiki/Hash_array_mapped_trie)로 변경 - * `recoil_sync_external_store` (기본적으로 활성화됨) - 사용중인 버전의 React에서 [`useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore)를 제공한다면 이에 대한 지원을 활성화함 + * `recoil_sync_external_store` (기본적으로 활성화됨) - 사용중인 버전의 React에서 [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore)를 제공한다면 이에 대한 지원을 활성화함 * `recoil_suppress_rerender_in_callback` (기본적으로 활성화됨) - 레퍼런스 동치로 비교했을 때 selector의 값이 변경되지 않았다면 컴포넌트의 리렌더링을 방지함 * `recoil_memory_managament_2020` (기본적으로 활성화됨) - atom과 selector의 컨텐츠가 어떠한 컴포넌트에서도 사용되지 않는다면 자동으로 메모리에서 해제하여 가비지 컬렉션을 수행함 - * `recoil_transition_support` - [`useTransition`](https://reactjs.org/docs/hooks-reference.html#usetransition) 지원을 활성화함; `recoil_sync_external_store`보다 우선하여 적용됨 + * `recoil_transition_support` - [`useTransition`](https://react.dev/reference/react/useTransition) 지원을 활성화함; `recoil_sync_external_store`보다 우선하여 적용됨 ## NodeJS diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md index 515b77358..7c337b05b 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md @@ -3,7 +3,7 @@ title: useRecoilCallback(callback, deps) sidebar_label: useRecoilCallback() --- -이 hook은 [*`useCallback()`*](https://reactjs.org/docs/hooks-reference.html#usecallback)과 비슷합니다만 Recoil 상태(state)에서 callback이 동작하도록 API를 제공합니다. 이 hook은 비동기적으로 현재의 Recoil 상태를 업데이트하는 기술과 Recoil 상태의 읽기 전용 [`Snapshot`](/docs/api-reference/core/Snapshot) 에 접근할 수 있는 callback을 구축하기 위해 사용될 수 있습니다. +이 hook은 [*`useCallback()`*](https://react.dev/reference/react/useCallback)과 비슷합니다만 Recoil 상태(state)에서 callback이 동작하도록 API를 제공합니다. 이 hook은 비동기적으로 현재의 Recoil 상태를 업데이트하는 기술과 Recoil 상태의 읽기 전용 [`Snapshot`](/docs/api-reference/core/Snapshot) 에 접근할 수 있는 callback을 구축하기 위해 사용될 수 있습니다. 이 hook을 사용하기 위한 동기로는 다음을 포함할 수 있습니다: * atom 혹은 selector가 업데이트 될 때 리렌더링하기 위해 React 컴포넌트를 구독하지 않고 비동기적으로 Recoil 상태를 읽기 위해 사용하기 @@ -29,7 +29,7 @@ function useRecoilCallback( ``` * **`callback`** - 콜백 인터페이스를 제공하는 래퍼 함수가 있는 유저 콜백 함수. 상태를 변경하는 콜백은 현재 Recoil 상태를 비동기로 업데이트 하기 위해 대기합니다. 래핑된 함수의 타입 시그니처는 리턴된 콜백의 타입 시그니처와 일치합니다. -* **`deps`** - 콜백을 메모하기 위한 선택적 의존성 모음입니다. `useCallback()`처럼, 생성된 콜백은 기본적으로 메모되지 않고 렌더링 할 때마다 새로운 함수를 생성합니다. 빈 배열을 넘겨 항상 동일한 함수 인스턴스를 반환하게 할 수도 있습니다. 만약 `deps` 배열에 값을 전달하고 dep의 참조 동등성이 변경되면 새로운 함수가 사용됩니다. 그러면 그 값들은 콜백의 몸체 내에서 오래되지 않게 사용될 수 있습니다. ([`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) 을 확인해주세요) [eslint를 업데이트](/docs/introduction/installation#eslint) 하여 이것이 올바르게 사용되고 있는지 확인할 수 있습니다. +* **`deps`** - 콜백을 메모하기 위한 선택적 의존성 모음입니다. `useCallback()`처럼, 생성된 콜백은 기본적으로 메모되지 않고 렌더링 할 때마다 새로운 함수를 생성합니다. 빈 배열을 넘겨 항상 동일한 함수 인스턴스를 반환하게 할 수도 있습니다. 만약 `deps` 배열에 값을 전달하고 dep의 참조 동등성이 변경되면 새로운 함수가 사용됩니다. 그러면 그 값들은 콜백의 몸체 내에서 오래되지 않게 사용될 수 있습니다. ([`useCallback`](https://react.dev/reference/react/useCallback) 을 확인해주세요) [eslint를 업데이트](/docs/introduction/installation#eslint) 하여 이것이 올바르게 사용되고 있는지 확인할 수 있습니다. 콜백 인터페이스: * **`snapshot`** - Snapshot은 콜백이 호출 된 현재 트랜잭션이 시작될 때 React batch로 커밋된 Recoil atom 상태의 읽기 전용 보기를 제공합니다. atom 값은 정적이지만, 비동기 selector는 여전히 보류중이거나 resolve 될 수 있습니다. diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md index e1f275e73..b8f096e61 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md @@ -17,7 +17,7 @@ type SetterOrUpdater = (T | (T => T)) => void; - `state`: [`atom`](/docs/api-reference/core/atom) 혹은 *쓰기가능*한 selector. 읽기 전용 [`selector`](/docs/api-reference/core/selector)가 `get`만 가지고 있을 때, *쓰기가능*한 selector는 `get` 과 `set` 를 정의에 가지고 있습니다. -이 API는 기본값 대신 React Recoil 상태를 인수로 받는 다는 점만 빼면 [`useState()`](https://reactjs.org/docs/hooks-reference.html#usestate) hook과 비슷합니다. 상태와 setter 함수의 최신 값의 튜플을 리턴합니다. setter 함수는 새로운 값을 인수로 받거나 이전 값을 매개변수로 받는 updater 함수를 취합니다. +이 API는 기본값 대신 React Recoil 상태를 인수로 받는 다는 점만 빼면 [`useState()`](https://react.dev/reference/react/useState) hook과 비슷합니다. 상태와 setter 함수의 최신 값의 튜플을 리턴합니다. setter 함수는 새로운 값을 인수로 받거나 이전 값을 매개변수로 받는 updater 함수를 취합니다. --- diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md index 50d621f4e..18339013d 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilStateLoadable() 이 hook은 비동기 selector의 값을 읽기 위해서 사용됩니다. 이 hook은 암묵적으로 주어진 상태에 컴포넌트를 구독합니다. - [`useRecoilState()`](/docs/api-reference/core/useRecoilState)와 다르게 이 hook은 비동기 selector에서 읽어올 때 ([React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)와 함께 작동하기 위해) Error 혹은 Promise를 던지지 않습니다. 대신 이 hook은 [`Loadable`](/docs/api-reference/core/Loadable) 객체를 setter 콜백과 함께 리턴합니다. + [`useRecoilState()`](/docs/api-reference/core/useRecoilState)와 다르게 이 hook은 비동기 selector에서 읽어올 때 ([React Suspense](https://react.dev/reference/react/Suspense)와 함께 작동하기 위해) Error 혹은 Promise를 던지지 않습니다. 대신 이 hook은 [`Loadable`](/docs/api-reference/core/Loadable) 객체를 setter 콜백과 함께 리턴합니다. --- diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilTransaction.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilTransaction.md index 28736c25f..7e0ddabee 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilTransaction.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilTransaction.md @@ -27,7 +27,7 @@ function useRecoilTransaction_UNSTABLE( ``` * **`callback`** - 트랜잭션 인터페이스를 제공하는 래퍼 함수가 있는 사용자 콜백 함수입니다. ***이 기능은 어떠한 사이드이펙트 없이 순수해야 합니다.*** -* **`deps`** - 콜백의 메모이제이션을 위한 선택적 디펜던시 집합입니다. `useCallback()`과 마찬가지로 생성된 트랜잭션 콜백은 기본적으로 메모되지 않으며 각 렌더에서 새 함수를 생성합니다. 빈 배열을 전달하여 항상 동일한 함수 인스턴스를 반환할 수 있습니다. `deps` 배열에 값을 전달하면, dep의 등식이 변경되면 새 함수가 사용됩니다. T이러한 값은 콜백 본문 내에서 오래되지 않고 사용할 수 있습니다. (See [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)) [update eslint](/docs/introduction/installation#eslint) eslint를 업데이트하여 올바르게 사용할 수 있도록 할 수 있습니다. +* **`deps`** - 콜백의 메모이제이션을 위한 선택적 디펜던시 집합입니다. `useCallback()`과 마찬가지로 생성된 트랜잭션 콜백은 기본적으로 메모되지 않으며 각 렌더에서 새 함수를 생성합니다. 빈 배열을 전달하여 항상 동일한 함수 인스턴스를 반환할 수 있습니다. `deps` 배열에 값을 전달하면, dep의 등식이 변경되면 새 함수가 사용됩니다. T이러한 값은 콜백 본문 내에서 오래되지 않고 사용할 수 있습니다. (See [`useCallback`](https://react.dev/reference/react/useCallback)) [update eslint](/docs/introduction/installation#eslint) eslint를 업데이트하여 올바르게 사용할 수 있도록 할 수 있습니다. Transaction Interface: * **`get`** - 트랜잭션 이전에 수행된 모든 쓰기를 반영하여 요청된 Recoil 상태에 대한 현재 값을 가져옵니다. 이것은 현재 동기 Atom만 지원합니다. diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md index a65528c83..fa5d65244 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilValueLoadable() 이 hook은 비동기 selector의 값을 읽기 위해 사용합니다. 이 hook은 주어진 상태에 컴포넌트를 암묵적으로 구독합니다. -[`useRecoilValue()`](/docs/api-reference/core/useRecoilValue)와는 다르게 이 hook은 비동기 selector에서 읽어올 때 ([React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)와 함께 작동하기 위해) `Error` 혹은 `Promise` 를 던지지 않습니다. 대신 이 hook은 값에 대한 [`Loadable`](/docs/api-reference/core/Loadable) 객체를 리턴합니다. +[`useRecoilValue()`](/docs/api-reference/core/useRecoilValue)와는 다르게 이 hook은 비동기 selector에서 읽어올 때 ([React Suspense](https://react.dev/reference/react/Suspense)와 함께 작동하기 위해) `Error` 혹은 `Promise` 를 던지지 않습니다. 대신 이 hook은 값에 대한 [`Loadable`](/docs/api-reference/core/Loadable) 객체를 리턴합니다. --- diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md index 717ddaa37..ffb7830f1 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md @@ -37,7 +37,7 @@ title: 'Bonus: Performance' ## 최적화 #1: `React.memo()` -하위 컴포넌트가 불필요하게 다시 렌더링되는 문제를 완화하기 위해 우리는 그 컴포넌트에 전달된 **props**를 기반으로 컴포넌트를 기억하는 [`React.memo()`](https://reactjs.org/docs/react-api.html#reactmemo)를 사용할 수 있다. +하위 컴포넌트가 불필요하게 다시 렌더링되는 문제를 완화하기 위해 우리는 그 컴포넌트에 전달된 **props**를 기반으로 컴포넌트를 기억하는 [`React.memo()`](https://react.dev/reference/react/memo)를 사용할 수 있다. ```js const TodoItem = React.memo(({item}) => ...); diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md index 217eede19..f1661cce4 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md @@ -61,7 +61,7 @@ function CurrentUserInfo() { Selector의 인터페이스는 동일하므로 컴포넌트에서는 selector를 사용하면서 동기 atom 상태나 파생된 selector 상태, 혹은 비동기 쿼리를 지원하는지 신경쓰지 않아도 괜찮습니다! -하지만, React 렌더 함수가 동기인데 promise가 resolve 되기 전에 무엇을 렌더 할 수 있을까요? Recoil은 보류중인 데이터를 다루기 위해 [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)와 함께 동작하도록 디자인되어 있습니다. 컴포넌트를 Suspense의 경계로 감싸는 것으로 아직 보류중인 하위 항목들을 잡아내고 대체하기 위한 UI를 렌더합니다. +하지만, React 렌더 함수가 동기인데 promise가 resolve 되기 전에 무엇을 렌더 할 수 있을까요? Recoil은 보류중인 데이터를 다루기 위해 [React Suspense](https://react.dev/reference/react/Suspense)와 함께 동작하도록 디자인되어 있습니다. 컴포넌트를 Suspense의 경계로 감싸는 것으로 아직 보류중인 하위 항목들을 잡아내고 대체하기 위한 UI를 렌더합니다. ```jsx function MyApp() { @@ -77,7 +77,7 @@ function MyApp() { ## Error Handling (에러 처리하기) -만약 요청에 에러가 있다면 어떻게 해야 할까요? Recoil selector는 컴포넌트에서 특정 값을 사용하려고 할 때에 어떤 에러가 생길지에 대한 에러를 던질 수 있습니다. 이는 React [``](https://reactjs.org/docs/error-boundaries.html)로 잡을 수 있습니다. 예를 들자면: +만약 요청에 에러가 있다면 어떻게 해야 할까요? Recoil selector는 컴포넌트에서 특정 값을 사용하려고 할 때에 어떤 에러가 생길지에 대한 에러를 던질 수 있습니다. 이는 React [``](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)로 잡을 수 있습니다. 예를 들자면: ```jsx const currentUserNameQuery = selector({ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/atom-effects.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/atom-effects.md index ddc7ba623..d4af895b6 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/atom-effects.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/atom-effects.md @@ -3,7 +3,7 @@ title: Atom Effects sidebar_label: Atom Effects --- -Atom Effects는 부수효과를 관리하고 Recoil의 atom을 초기화 또는 동기화하기 위한 API입니다. Atom Effects는 state persistence(상태 지속성), state synchronization(상태 동기화), managing history(히스토리 관리), logging(로깅) 등등 유용한 어플리케이션을 여럿 가지고 있습니다. 이는 [React effects](https://reactjs.org/docs/hooks-effect.html)와도 유사하지만, Atom Effects는 atom 정의의 일부로 정의되므로 각 atom은 자체적인 정책들을 지정하고 구성할 수 있습니다. +Atom Effects는 부수효과를 관리하고 Recoil의 atom을 초기화 또는 동기화하기 위한 API입니다. Atom Effects는 state persistence(상태 지속성), state synchronization(상태 동기화), managing history(히스토리 관리), logging(로깅) 등등 유용한 어플리케이션을 여럿 가지고 있습니다. 이는 [React effects](https://react.dev/learn/synchronizing-with-effects)와도 유사하지만, Atom Effects는 atom 정의의 일부로 정의되므로 각 atom은 자체적인 정책들을 지정하고 구성할 수 있습니다. *Atom Effect*는 다음의 정의를 따르는 함수입니다. diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/transitions.md b/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/transitions.md index 70ddf6612..f4556407e 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/transitions.md +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/guides/transitions.md @@ -3,7 +3,7 @@ title: React 18 트랜지션 sidebar_label: 트랜지션 --- -[React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) 은 상태가 준비되기 전에 렌더링할 대상을 제어하며 새로운 상태로 전환하기 위한 hook, [**`useTransition()`**](https://reactjs.org/docs/react-api.html#transitions) 을 제공합니다. Recoil은 이 접근 방식과 호환되어야 하며 React의 상태와 일관된 뷰를 제공해야 합니다. 그러나 React 18은 동시 업데이트에서 제외될 수 있으며 아직 외부 스토어의 상태 변경에 따른 트랜지션을 공식적으로 지원하지 않습니다. React 팀은 해당 기능에 대한 지원을 고려하고 있으나, 그 전에도 사용 할 수 있도록 다음과 같은 hook을 통해 이에 대한 실험적인 지원을 추가하였습니다. +[React 18](https://react.dev/blog/2021/06/08/the-plan-for-react-18) 은 상태가 준비되기 전에 렌더링할 대상을 제어하며 새로운 상태로 전환하기 위한 hook, [**`useTransition()`**](https://react.dev/reference/react/useTransition) 을 제공합니다. Recoil은 이 접근 방식과 호환되어야 하며 React의 상태와 일관된 뷰를 제공해야 합니다. 그러나 React 18은 동시 업데이트에서 제외될 수 있으며 아직 외부 스토어의 상태 변경에 따른 트랜지션을 공식적으로 지원하지 않습니다. React 팀은 해당 기능에 대한 지원을 고려하고 있으나, 그 전에도 사용 할 수 있도록 다음과 같은 hook을 통해 이에 대한 실험적인 지원을 추가하였습니다. 이 API는 핸들링 하지 못한 유즈 케이스가 있을 수 있기 때문에 실험적입니다. diff --git a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md index 03fc2e09b..39f8947cc 100644 --- a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md +++ b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilCallback.md @@ -3,7 +3,7 @@ title: useRecoilCallback(callback, deps) sidebar_label: useRecoilCallback() --- -这个钩子类似于 [*`useCallback()`*](https://reactjs.org/docs/hooks-reference.html#usecallback)，但将为你的回调提供一个 API，以便与 Recoil 状态一起工作。这个钩子可以用来构造一个回调，这个回调可以访问 Recoil 状态的只读 [`Snapshot`](/docs/api-reference/core/Snapshot)，并且能够异步更新当前的 Recoil 状态。 +这个钩子类似于 [*`useCallback()`*](https://react.dev/reference/react/useCallback)，但将为你的回调提供一个 API，以便与 Recoil 状态一起工作。这个钩子可以用来构造一个回调，这个回调可以访问 Recoil 状态的只读 [`Snapshot`](/docs/api-reference/core/Snapshot)，并且能够异步更新当前的 Recoil 状态。 使用这种钩子的一些情况： * 异步读取 Recoil 状态，而无需订阅 React 组件在原子或选择器更新时重新渲染。 @@ -29,7 +29,7 @@ function useRecoilCallback( ``` * **`callback`** - 用户回调函数，有一个提供回调接口的包装函数。改变状态的回调将被排队，以异步更新当前的 Recoil 状态。封装函数的类型签名与返回的回调函数的类型签名相匹配。 -* **`deps`** - 用于记忆回调的一组可选的依赖项。和 `useCallback()` 一样，产生的回调默认不会被备忘，每次渲染都会产生一个新的函数。你可以传递一个空数组，以始终返回相同的函数实例。如果你在 `deps` 数组中传递数值，如果任何对 dep 的引用平等性发生变化，一个新的函数将被使用。然后，这些值可以在你的回调主体中使用而不会变质。参见 [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) 你可以 [更新 eslint](/docs/introduction/installation#eslint) 来帮助确保这一点被正确使用。 +* **`deps`** - 用于记忆回调的一组可选的依赖项。和 `useCallback()` 一样，产生的回调默认不会被备忘，每次渲染都会产生一个新的函数。你可以传递一个空数组，以始终返回相同的函数实例。如果你在 `deps` 数组中传递数值，如果任何对 dep 的引用平等性发生变化，一个新的函数将被使用。然后，这些值可以在你的回调主体中使用而不会变质。参见 [`useCallback`](https://react.dev/reference/react/useCallback) 你可以 [更新 eslint](/docs/introduction/installation#eslint) 来帮助确保这一点被正确使用。 回调接口： * **`snapshot`** - [`Snapshot`](/docs/api-reference/core/Snapshot) 提供了一个只读的 Recoil 原子状态，当回调的当前事务开始时，它与 React 批次一起提交。 虽然原子值是静态的，但异步选择器可能仍在等待或解决。 diff --git a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md index d7c6c2baf..d5079567a 100644 --- a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md +++ b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilState.md @@ -17,7 +17,7 @@ type SetterOrUpdater = (T | (T => T)) => void; - `state`: 一个 [`atom`](/docs/api-reference/core/atom) 或一个 _可写_ 的 [`selector`](/docs/api-reference/core/selector)。可写的 selector 在其定义的同时具有 `get` 和 `set` 函数，而只读 selector 只有一个 `get`。 -本 API 和 React 的 [`useState()`](https://reactjs.org/docs/hooks-reference.html#usestate) hook 类似，区别在于 `useRecoilState` 的参数使用 Recoil state 代替了 `useState()` 的默认值。它返回由 state 的当前值和 setter 函数组成的元组。Setter 函数的参数可以是新值，也可以是一个以之前的值为参数的更新器函数。 +本 API 和 React 的 [`useState()`](https://react.dev/reference/react/useState) hook 类似，区别在于 `useRecoilState` 的参数使用 Recoil state 代替了 `useState()` 的默认值。它返回由 state 的当前值和 setter 函数组成的元组。Setter 函数的参数可以是新值，也可以是一个以之前的值为参数的更新器函数。 --- diff --git a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md index 8ddc61112..3b496478c 100644 --- a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md +++ b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilStateLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilStateLoadable() 此钩子可用于读取异步 selector 的值。为获取到指定状态值，此钩子将隐含地订阅对应组件。 -与 [`useRecoilState()`](/docs/api-reference/core/useRecoilState) 不同，当读取异步 selector 时，这个钩子不会抛出一个 `Error` 或`Promise` (为了能与 [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) 共存)。相反，这个钩子会返回一个 [`Loadable`](/docs/api-reference/core/Loadable) 对象的值以及 setter 回调。 +与 [`useRecoilState()`](/docs/api-reference/core/useRecoilState) 不同，当读取异步 selector 时，这个钩子不会抛出一个 `Error` 或`Promise` (为了能与 [React Suspense](https://react.dev/reference/react/Suspense) 共存)。相反，这个钩子会返回一个 [`Loadable`](/docs/api-reference/core/Loadable) 对象的值以及 setter 回调。 --- diff --git a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md index 28b4aff36..5c0c9940d 100644 --- a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md +++ b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/api-reference/core/useRecoilValueLoadable.md @@ -5,7 +5,7 @@ sidebar_label: useRecoilValueLoadable() 此 hook 用来读取异步 selector 的值。使用此 hook 会使组件隐式地订阅给定的 state。 -与 [`useRecoilValue()`](/docs/api-reference/core/useRecoilValue) 不同，当此 hook 从异步 selector（为了和 [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) 一起工作）读取数据时，不会抛出 `Error` 或 `Promise`，它会返回一个 [`Loadable`](/docs/api-reference/core/Loadable) 对象。 +与 [`useRecoilValue()`](/docs/api-reference/core/useRecoilValue) 不同，当此 hook 从异步 selector（为了和 [React Suspense](https://react.dev/reference/react/Suspense) 一起工作）读取数据时，不会抛出 `Error` 或 `Promise`，它会返回一个 [`Loadable`](/docs/api-reference/core/Loadable) 对象。 --- diff --git a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md index 17523352e..cb15b51ad 100644 --- a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md +++ b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/basic-tutorial/performance.md @@ -37,7 +37,7 @@ Ideally, components would re-render only when they absolutely have to (when the ## Optimization #1: `React.memo()` -To mitigate the issue of child components re-rendering unnecessarily, we can make use of [`React.memo()`](https://reactjs.org/docs/react-api.html#reactmemo), which memoizes a component based on the **props** passed to that component: +To mitigate the issue of child components re-rendering unnecessarily, we can make use of [`React.memo()`](https://react.dev/reference/react/memo), which memoizes a component based on the **props** passed to that component: ```js const TodoItem = React.memo(({item}) => ...); diff --git a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md index 53d1e6225..1eec09682 100644 --- a/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md +++ b/docs/i18n/zh-hans/docusaurus-plugin-content-docs/current/guides/asynchronous-data-queries.md @@ -61,7 +61,7 @@ function CurrentUserInfo() { selector 的接口总是相同的，所以使用这个 selector 的组件不需要关心它是用同步 atom 状态、派生 selector 状态或者异步查询来实现的！ -但是，由于 React 的渲染函数是同步的，在 Promise 解决之前，它将渲染什么？Recoil 的设计配合 [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) 处理待定 (pending) 数据。如果用 Suspense 边界包裹你的组件，会捕捉到任何仍在 pending 中的后代，并渲染一个后备（fallback） UI。 +但是，由于 React 的渲染函数是同步的，在 Promise 解决之前，它将渲染什么？Recoil 的设计配合 [React Suspense](https://react.dev/reference/react/Suspense) 处理待定 (pending) 数据。如果用 Suspense 边界包裹你的组件，会捕捉到任何仍在 pending 中的后代，并渲染一个后备（fallback） UI。 ```jsx function MyApp() { @@ -77,7 +77,7 @@ function MyApp() { ## 报错处理 -但如果请求有错误怎么办？Recoil selector 也可以抛出错误，其错误来自一个组件试图使用该值时就会抛出的错误。这可以用 React [``](https://reactjs.org/docs/error-boundaries.html) 来捕捉。例如： +但如果请求有错误怎么办？Recoil selector 也可以抛出错误，其错误来自一个组件试图使用该值时就会抛出的错误。这可以用 React [``](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) 来捕捉。例如： ```jsx const currentUserNameQuery = selector({