From 68e551a16ad6893603d555080a648d105bf26e3a Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 16 Oct 2023 13:03:27 +0900 Subject: [PATCH] Resolve conflicts and translate text --- src/content/learn/typescript.md | 8 -------- src/content/reference/react/useSyncExternalStore.md | 6 +++--- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index f60bc1541..80acb733b 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -284,11 +284,7 @@ export default App = AppTSX; -<<<<<<< HEAD 意味のあるデフォルト値が存在する場合にはこれでうまくいきます。しかし時にはそうではない場合もあり、デフォルト値として `null` が適切に感じられることもあるでしょう。型システムにあなたのコードを理解させるため、`createContext` 呼び出しで `ContextShape | null` と明示的に指定する必要があります。 -======= -This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 これにより、コンテクストを利用する側で `| null` の可能性を排除する必要が生じます。お勧めの方法は、値が存在することをフックで実行時にチェックし、存在しない場合にエラーをスローするようにすることです。 @@ -464,8 +460,4 @@ interface MyComponentProps { - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) はコミュニティによってメンテナンスされている、React で TypeScript を使用するためのチートシートです。多くの有用なエッジケースをカバーしており、このドキュメントよりも広範な解説が得られます。 -<<<<<<< HEAD - [TypeScript コミュニティ Discord](https://discord.com/invite/typescript) は、TypeScript と React の問題について質問したり、助けを得たりするための素晴らしい場所です。 -======= - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index b200529a8..f1988872c 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -57,11 +57,11 @@ function TodosApp() { * 再レンダー中に異なる `subscribe` 関数が渡された場合、React は新しく渡された `subscribe` 関数を使ってストアに再サブスクライブします。これを防ぐには、`subscribe` をコンポーネントの外で宣言します。 -* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the transition update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store. +* [ノンブロッキング型のトランジション更新](/reference/react/useTransition)の最中にストアの書き換えが発生した場合、React はその更新をブロッキング型で行うようにフォールバックします。具体的には、React は DOM に更新を適用する前に `getSnapshot` を再度呼び出します。そこで最初の値とは異なる値が返された場合、React はトランジションの更新を最初からやり直しますが、再試行時にはブロッキング型の更新を行うことで、画面上の全コンポーネントがストアからの同一バージョンの値を反映していることを保証します。 -* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be [marked as non-blocking transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX. +* `useSyncExternalStore` から返される値に基づいてレンダーを*サスペンド*させることは推奨されていません。外部ストアで起きた変更は[ノンブロッキング型のトランジション更新](/reference/react/useTransition)としてマークすることができないため、直近の [`Suspense` フォールバック](/reference/react/Suspense)が起動してしまいます。既に画面上に表示されているコンテンツがローディングスピナで隠れてしまうため、通常は望ましくないユーザ体験につながります。 - For example, the following are discouraged: + 例えば以下のようなコードは推奨されません。 ```js const LazyProductDetailPage = lazy(() => import('./ProductDetailPage.js'));