Merge pull request #683 from reactjs/sync-2390627c

Sync with react.dev @ 2390627

Author: koba04

public/images/team/dave-mccabe.jpg

@@ -1696,8 +1696,8 @@ function LikeButton({video}) {
     <button
       data-hover="LikeButton"
       className={cn(
-        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
-        isLiked && 'text-red-50'
+        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
+        isLiked ? 'text-red-50' : 'text-tertiary'
       )}
       aria-label={isLiked ? 'Unsave' : 'Save'}
       onClick={() => {

public/images/team/lunaruan.jpg

@@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
         <ul className="space-y-2 pb-16">
           {headings.length > 0 &&
             headings.map((h, i) => {
-              if (h.url == null) {
-                // TODO: only log in DEV
+              if (!h.url && process.env.NODE_ENV === 'development') {
                 console.error('Heading does not have URL');
               }
               return (

public/images/team/mengdi-chen.jpg

@@ -21,19 +21,12 @@ const deployedTranslations = [
   'en',
   'zh-hans',
   'es',
+  'fr',
   // We'll add more languages when they have enough content.
   // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
   // It must be the same between all translations.
 ];
 
-let shouldPreventIndexing = false;
-if (
-  siteConfig.languageCode !== 'en' &&
-  !deployedTranslations.includes(siteConfig.languageCode)
-) {
-  shouldPreventIndexing = true;
-}
-
 function getDomain(languageCode: string): string {
   const subdomain = languageCode === 'en' ? '' : languageCode + '.';
   return subdomain + 'react.dev';
@@ -69,7 +62,6 @@ export const Seo = withRouter(
           href={canonicalUrl.replace(siteDomain, getDomain('en'))}
           hrefLang="x-default"
         />
-        {shouldPreventIndexing && <meta name="robots" content="noindex" />}
         {deployedTranslations.map((languageCode) => (
           <link
             key={'alt-' + languageCode}

public/images/team/sean-keegan.jpg

@@ -24,6 +24,7 @@ title: 謝辞
 * [Christoph Nakazawa](https://github.com/cpojer)
 * [Christopher Chedeau](https://github.com/vjeux)
 * [Clement Hoang](https://github.com/clemmy)
+* [Dave McCabe](https://github.com/davidmccabe)
 * [Dominic Gannaway](https://github.com/trueadm)
 * [Flarnie Marchan](https://github.com/flarnie)
 * [Jason Quense](https://github.com/jquense)
@@ -33,8 +34,10 @@ title: 謝辞
 * [Josh Duck](https://github.com/joshduck)
 * [Joe Critchley](https://github.com/joecritch)
 * [Jeff Morrison](https://github.com/jeffmo)
+* [Luna Ruan](https://github.com/lunaruan)
 * [Keyan Zhang](https://github.com/keyz)
 * [Marco Salazar](https://github.com/salazarm)
+* [Mengdi Chen](https://github.com/mondaychen)
 * [Nat Alison](https://github.com/tesseralis)
 * [Nathan Hunzaker](https://github.com/nhunzaker)
 * [Nicolas Gallagher](https://github.com/necolas)
@@ -45,7 +48,7 @@ title: 謝辞
 * [Robert Zhang](https://github.com/robertzhidealx)
 * [Sander Spies](https://github.com/sanderspies)
 * [Sasha Aickin](https://github.com/aickin)
-* [Seth Webster](https://github.com/sethwebster)
+* [Sean Keegan](https://github.com/seanryankeegan)
 * [Sophia Shoemaker](https://github.com/mrscobbler)
 * [Sunil Pai](https://github.com/threepointone)
 * [Tim Yung](https://github.com/yungsters)

src/components/Layout/HomeContent.js

@@ -26,10 +26,6 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Dan は Microsoft PowerPoint の中に偶然 Visual Basic を発見したことからプログラミングを始めました。[Sebastian](#sebastian-markbåge) のツイートを長文のブログ投稿に翻訳することが真の使命であると感じています。Fortnite では、ゲームが終わるまで茂みの中に隠れて勝利することがあります。
 </TeamMember>
 
-<TeamMember name="Dave McCabe" permalink="dave-mccabe" photo="/images/team/dave-mccabe.jpg" github="davidmccabe" twitter="mcc_abe" title="Engineer at Meta">
-    David の本職はエンジニアですが、中身は野外活動家です。太陽光下プログラミングの分野における長年のイノベーターです。ビデオ通話の背景をアウトドア系にして同僚を驚かせている一方で、ギター演奏（もちろん日の光が降り注ぐ草原で）や格闘技（まだ室内ですが屋外に挑戦予定）を楽しんでいます。
-</TeamMember>
-
 <TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" title="Engineering Manager at Meta">
     Eli のプログラミング経験は、ハッキングで中学校を停学処分になったことで始まりました。2017 年から React と React Native の開発に携わっています。お菓子を食べるのが好きで、特にアイスクリームとアップルパイがお気に入りです。Eli はよくパルクールや室内スカイダイビング、エアリアルシルクなど、風変わりな活動を試しています。
 </TeamMember>
@@ -54,10 +50,6 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Lauren のプログラミングキャリアは `<marquee>` タグを初めて見たときにピークを迎えました。それ以来、彼女はその時の高揚感を追い続けています。React にバグを追加する傍らで、チャットでお茶目なミームを投下したり、パートナや犬の Zelda と一緒にこれでもかとビデオゲームを楽しんだりしています。
 </TeamMember>
 
-<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Independent Engineer">
-    Luna は、ゲームを作るためのものだと思ってプログラミングを学びました。その後結局、Pinterest のウェブアプリ、そして今では React 自体に取り組むことになりました。Luna はもうゲームを作りたいとは思っていませんが、暇ができれば文芸に挑戦する予定です。
-</TeamMember>
-
 <TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" title="Engineer at Meta">
     Luna は 6 歳のときに父親から Python の基礎を学びました。それ以来、彼女を止めることは誰にもできません。典型的な Z 世代であらんと熱望する彼女のサクセスロードを形作るのは、環境保護活動、都会でのガーデニング、そして Voo-Doo'd（写真）と過ごす貴重な時間です。
 </TeamMember>
@@ -66,10 +58,6 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Matt は偶然コーディングに出会い、独りでは作り出せないようなものをコミュニティで作ることに夢中になりました。React に参加する前は、YouTube、Google アシスタント、Fuchsia、Google Cloud AI、そして Evernote に取り組んでいました。開発者ツールの改善を行う傍らで、山を楽しんだり、ジャズを聴いたり、家族と時間を過ごしたりしています。
 </TeamMember>
 
-<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Engineer at Meta">
-    Mengdi はデジタルアートの学位取得を目指す一方で、自らのフロントエンド技術に対して自惚れに近い自信を持っていました。彼の CSS は IE6 でも完全に動作したからです。しかしその後すぐ React によりプログラミングの新たな扉が開かれてからは、React チームに参加することを夢見てきました。仕事以外では、2 人の子供を追いかけ回したり、奇妙なレシピを集めたりしています。
-</TeamMember>
-
 <TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
     Mofei はゲームでチートを行うのに役立つと気づいたことでプログラミングを始めました。彼女は学部・大学院ではオペレーティングシステムを専門にしていましたが、今では React いじりを楽しんでいます。仕事の外では、ボルダリングの問題をデバッグすることや、次回のバックパック旅行の計画を楽しんでいます。
 </TeamMember>
@@ -86,10 +74,6 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Sathya は学校ではドラゴン本（コンパイラの教科書）が大嫌いだったにも関わらず、どういうわけかキャリアを通じてコンパイラに取り組むことになりました。React コンポーネントをコンパイルしていないときは、コーヒーを飲んでいるかひたすらドーサを食べているかのどちらかです。
 </TeamMember>
 
-<TeamMember name="Sean Keegan" permalink="sean-keegan" photo="/images/team/sean-keegan.jpg" github="seanryankeegan" twitter="DevRelSean" title="Developer Advocate at Meta">
-    Sean は数学教師として働き始めた後、必修で取る必要があった計算機科学入門の授業が「ちょっと楽しかった！」のを思い出しました。コーディングブートキャンプと幾つかのテック関連の仕事を経て、開発者アドボケートとしての仕事に出会い、以降はそれ一筋です。仕事外ではアルティメットフリスビーやビデオゲームを楽しんだり、家にある植物の栽培についての改善調査（ただし実践はほぼしない）を行ったりしています。
-</TeamMember>
-
 <TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Engineer at Vercel">
     Sebastian の専攻は心理学でした。普段の彼はもの静かです。彼が何かを言ったとしても、数か月後まで他の人には理解できないことがよくあります。彼の姓の発音は本来 "mark-boa-geh" ですが、実用性を優先して "mark-beige" に落ち着きました。彼の React へのアプローチも実用主義的です。
 </TeamMember>

src/components/Layout/Toc.tsx

@@ -462,7 +462,7 @@ export default function Gallery() {
           </li>
           <li>
             <b>Discovered: </b>
-            polonium (element)
+            polonium (chemical element)
           </li>
         </ul>
       </section>

src/components/Seo.tsx

@@ -926,7 +926,7 @@ function ChatRoom() {
 
   useEffect(() => {
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, []); // ✅ All dependencies declared

src/content/community/acknowledgements.md

@@ -1488,8 +1488,6 @@ export default function FeedbackForm() {
 <Sandpack>
 
 ```js
-import { useState } from 'react';
-
 export default function FeedbackForm() {
   function handleClick() {
     const name = prompt('What is your name?');

src/content/community/team.md

@@ -79,7 +79,7 @@ React がコンポーネントを再レンダーする際には：
 
 1. React が再度あなたの関数を呼び出します。
 2. 関数は新しい JSX のスナップショットを返します。
-3. React は返されたスナップショットに合わせて画面を更新します。
+3. React はあなたの関数が返したスナップショットに合わせて画面を更新します。
 
 <IllustrationBlock sequential>
     <Illustration caption="React が関数を実行" src="/images/docs/illustrations/i_render1.png" />

src/content/learn/passing-props-to-a-component.md

@@ -767,7 +767,7 @@ useEffect(() => {
   }
 ```
 
-**これで分かるのは、再マウントでアプリケーションのロジックが壊れるなら、通常それは既存のバグが明らかになったのだということです**。ユーザの視点から見ると、ページを訪れることと、ページを訪れてリンクをクリックして別のページに行ってから戻るボタンを押すこととの間に、違いがあってはいけません。React は、開発環境でコンポーネントを 1 度再マウントすることで、この原則に従っていることを確認します。
+**これで分かるのは、再マウントでアプリケーションのロジックが壊れるなら、通常それは既存のバグが明らかになったのだということです**。ユーザの視点から見ると、ページを訪れることと、ページを訪れてリンクをクリックしてから戻るボタンを押して元のページをもう一度見ることとの間に、違いがあってはいけません。React は、開発環境でコンポーネントを 1 度再マウントすることで、この原則に従っていることを確認します。
 
 ## ここまでのまとめ {/*putting-it-all-together*/}
 

src/content/learn/removing-effect-dependencies.md

@@ -100,11 +100,11 @@ title: "<div> などの一般的なコンポーネント"
 * `onFocusCapture`: `onFocus` の[キャプチャフェーズ](/learn/responding-to-events#capture-phase-events)で発火するバージョン。
 * [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): [`PointerEvent` ハンドラ](#pointerevent-handler)関数。要素がプログラム的にポインタをキャプチャしたときに発火します。
 * `onGotPointerCaptureCapture`: `onGotPointerCapture` の[キャプチャフェーズ](/learn/responding-to-events#capture-phase-events)で発火するバージョン。
-* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): [`KeyboardEvent` ハンドラ](#pointerevent-handler)関数。キーが押されたときに発火します。
+* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): [`KeyboardEvent` ハンドラ](#keyboardevent-handler)関数。キーが押されたときに発火します。
 * `onKeyDownCapture`: `onKeyDown` の[キャプチャフェーズ](/learn/responding-to-events#capture-phase-events)で発火するバージョン。
-* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): [`KeyboardEvent` ハンドラ](#pointerevent-handler)関数。非推奨です。代わりに `onKeyDown` または `onBeforeInput` を使用してください。
+* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): [`KeyboardEvent` ハンドラ](#keyboardevent-handler)関数。非推奨です。代わりに `onKeyDown` または `onBeforeInput` を使用してください。
 * `onKeyPressCapture`: `onKeyPress` の[キャプチャフェーズ](/learn/responding-to-events#capture-phase-events)で発火するバージョン。
-* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): [`KeyboardEvent` ハンドラ](#pointerevent-handler)関数。キーが離されたときに発火します。
+* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): [`KeyboardEvent` ハンドラ](#keyboardevent-handler)関数。キーが離されたときに発火します。
 * `onKeyUpCapture`: `onKeyUp` の[キャプチャフェーズ](/learn/responding-to-events#capture-phase-events)で発火するバージョン。
 * [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): [`PointerEvent` ハンドラ](#pointerevent-handler)関数。要素がポインタのキャプチャを停止したときに発火します。
 * `onLostPointerCaptureCapture`: `onLostPointerCapture` の[キャプチャフェーズ](/learn/responding-to-events#capture-phase-events)で発火するバージョン。

src/content/learn/state-a-components-memory.md

@@ -4,9 +4,9 @@ canary: true
 ---
 
 <Canary>
-* `cache` is only for use with [React Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). See [frameworks](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks) that support React Server Components.
+* `cache` is only for use with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). See [frameworks](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) that support React Server Components.
 
-* `cache` is only available in React’s [Canary](https://react.dev/community/versioning-policy#canary-channel) and [experimental](https://react.dev/community/versioning-policy#experimental-channel) channels. Please ensure you understand the limitations before using `cache` in production. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+* `cache` is only available in React’s [Canary](/community/versioning-policy#canary-channel) and [experimental](/community/versioning-policy#experimental-channel) channels. Please ensure you understand the limitations before using `cache` in production. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
 </Canary>
 
 <Intro>
@@ -68,7 +68,7 @@ The optimization of caching return values based on inputs is known as [_memoizat
 - React will invalidate the cache for all memoized functions for each server request. 
 - Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache.
 - `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments.
-- `cache` is for use in [Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only.
+- `cache` is for use in [Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only.
 
 ---
 

src/content/learn/state-as-a-snapshot.md

@@ -62,7 +62,7 @@ function ChatRoom({ roomId }) {
 
 * 依存配列の一部にコンポーネント内で定義されたオブジェクトや関数がある場合、**エフェクトが必要以上に再実行される**可能性があります。これを修正するには、[オブジェクト型](#removing-unnecessary-object-dependencies)および[関数型](#removing-unnecessary-function-dependencies)の不要な依存値を削除します。また、エフェクトの外部に [state の更新](#updating-state-based-on-previous-state-from-an-effect)や[非リアクティブなロジック](#reading-the-latest-props-and-state-from-an-effect)を抽出することもできます。
 
-* エフェクトがユーザ操作（クリックなど）によって引き起こされたものでない場合、React はブラウザが**新しい画面を描画した後にエフェクトを実行**します。あなたのエフェクトが（ツールチップの配置など）何か視覚的な作業を行っており遅延が目立つ場合（ちらつくなど）、`useEffect` を [`useLayoutEffect` に置き換えてください](/reference/react/useLayoutEffect)。
+* エフェクトがユーザ操作（クリックなど）によって引き起こされたものでない場合、React は通常、ブラウザが**新しい画面を描画した後にエフェクトを実行**します。あなたのエフェクトが（ツールチップの配置など）何か視覚的な作業を行っており遅延が目立つ場合（ちらつくなど）、`useEffect` を [`useLayoutEffect` に置き換えてください](/reference/react/useLayoutEffect)。
 
 * エフェクトがユーザ操作（クリックなど）によって引き起こされた場合でも、**ブラウザはエフェクト内の state 更新処理の前に画面を再描画する可能性があります**。通常、これが望ましい動作です。しかし、ブラウザによる画面の再描画をブロックしなければならない場合、`useEffect` を [`useLayoutEffect` に置き換える必要があります](/reference/react/useLayoutEffect)。