Merge remote-tracking branch 'reactdev/main' into merge-react-dev

rickhanlonii · rickhanlonii · commit 280fcfa8ecff · 2023-04-20T14:38:32.000-04:00
diff --git a/public/images/docs/diagrams/preserving_state_increment.dark.png b/public/images/docs/diagrams/preserving_state_increment.dark.png
diff --git a/public/images/docs/diagrams/preserving_state_increment.png b/public/images/docs/diagrams/preserving_state_increment.png
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -5,6 +5,7 @@
 import * as React from 'react';
 import Head from 'next/head';
 import {withRouter, Router} from 'next/router';
+import {siteConfig} from '../siteConfig';
 
 export interface SeoProps {
   title: string;
@@ -16,6 +17,28 @@ export interface SeoProps {
   searchOrder?: number;
 }
 
+const deployedTranslations = [
+  'en',
+  'zh-hans',
+  'es',
+  // 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';
+}
+
 export const Seo = withRouter(
   ({
     title,
@@ -26,29 +49,38 @@ export const Seo = withRouter(
     isHomePage,
     searchOrder,
   }: SeoProps & {router: Router}) => {
+    const siteDomain = getDomain(siteConfig.languageCode);
+    const canonicalUrl = `https://${siteDomain}${
+      router.asPath.split(/[\?\#]/)[0]
+    }`;
     const pageTitle = isHomePage ? 'React' : title + ' – React';
     // Twitter's meta parser is not very good.
     const twitterTitle = pageTitle.replace(/[<>]/g, '');
     return (
       <Head>
-        {/* DEFAULT */}
-
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-
         {title != null && <title key="title">{pageTitle}</title>}
         {description != null && (
           <meta name="description" key="description" content={description} />
         )}
-        {/* <link rel="icon" type="image/x-icon" href={favicon} />
-      <link rel="apple-touch-icon" href={favicon} />  @todo favicon */}
+        <link rel="canonical" href={canonicalUrl} />
+        <link
+          rel="alternate"
+          href={canonicalUrl.replace(siteDomain, getDomain('en'))}
+          hrefLang="x-default"
+        />
+        {shouldPreventIndexing && <meta name="robots" content="noindex" />}
+        {deployedTranslations.map((languageCode) => (
+          <link
+            key={'alt-' + languageCode}
+            rel="alternate"
+            hrefLang={languageCode}
+            href={canonicalUrl.replace(siteDomain, getDomain(languageCode))}
+          />
+        ))}
         <meta property="fb:app_id" content="623268441017527" />
-        {/* OPEN GRAPH */}
         <meta property="og:type" key="og:type" content="website" />
-        <meta
-          property="og:url"
-          key="og:url"
-          content={`https://react.dev${router.asPath.split(/[\?\#]/)[0]}`}
-        />
+        <meta property="og:url" key="og:url" content={canonicalUrl} />
         {title != null && (
           <meta property="og:title" content={pageTitle} key="og:title" />
         )}
@@ -59,14 +91,11 @@ export const Seo = withRouter(
             content={description}
           />
         )}
-
         <meta
           property="og:image"
           key="og:image"
-          content={`https://react.dev${image}`}
+          content={`https://${siteDomain}${image}`}
         />
-
-        {/* TWITTER */}
         <meta
           name="twitter:card"
           key="twitter:card"
@@ -88,11 +117,10 @@ export const Seo = withRouter(
             content={description}
           />
         )}
-
         <meta
           name="twitter:image"
           key="twitter:image"
-          content={`https://react.dev${image}`}
+          content={`https://${siteDomain}${image}`}
         />
         <meta
           name="google-site-verification"
diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
@@ -62,7 +62,7 @@ Offscreen is a low level capability that unlocks high level features. Similar to
 
 ## Transition Tracing {/*transition-tracing*/}
 
-Currently, React has two profiling tools. The [original Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code.
+Currently, React has two profiling tools. The [original Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code.
 
 We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it.
 
diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md
@@ -30,7 +30,7 @@ Instead, we release new features in minor versions. That means that minor releas
 
 ### Commitment to stability {/*commitment-to-stability*/}
 
-As we change React over time, we try to minimize the effort required to take advantage of new features. When possible, we'll keep an older API working, even if that means putting it in a separate package. For example, [mixins have been discouraged for years](/blog/2016/07/13/mixins-considered-harmful.html) but they're supported to this day [via create-react-class](/docs/react-without-es6.html#mixins) and many codebases continue to use them in stable, legacy code.
+As we change React over time, we try to minimize the effort required to take advantage of new features. When possible, we'll keep an older API working, even if that means putting it in a separate package. For example, [mixins have been discouraged for years](https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html) but they're supported to this day [via create-react-class](https://legacy.reactjs.org/docs/react-without-es6.html#mixins) and many codebases continue to use them in stable, legacy code.
 
 Over a million developers use React, collectively maintaining millions of components. The Facebook codebase alone has over 50,000 React components. That means we need to make it as easy as possible to upgrade to new versions of React; if we make large changes without a migration path, people will be stuck on old versions. We test these upgrade paths on Facebook itself – if our team of less than 10 people can update 50,000+ components alone, we hope the upgrade will be manageable for anyone using React. In many cases, we write [automated scripts](https://github.com/reactjs/react-codemod) to upgrade component syntax, which we then include in the open-source release for everyone to use.
 
diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
@@ -126,7 +126,7 @@ There is no benefit to wrapping a component in `memo` in other cases. There is n
 1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
 1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component.
 
-If a specific interaction still feels laggy, [use the React Developer Tools profiler](/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
+If a specific interaction still feels laggy, [use the React Developer Tools profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
 
 </DeepDive>
 
diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md
@@ -235,7 +235,7 @@ Note that `useCallback` does not prevent *creating* the function. You're always
 1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
 1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component.
 
-If a specific interaction still feels laggy, [use the React Developer Tools profiler](/blog/2018/09/10/introducing-the-react-profiler.html) to see which components benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In long term, we're researching [doing memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
+If a specific interaction still feels laggy, [use the React Developer Tools profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) to see which components benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In long term, we're researching [doing memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
 
 </DeepDive>
 
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
@@ -161,7 +161,7 @@ There is no benefit to wrapping a calculation in `useMemo` in other cases. There
 1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
 1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component.
 
-If a specific interaction still feels laggy, [use the React Developer Tools profiler](/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
+If a specific interaction still feels laggy, [use the React Developer Tools profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all.
 
 </DeepDive>
 
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,11 +3,11 @@
  */
 
 import {Html, Head, Main, NextScript} from 'next/document';
+import {siteConfig} from '../siteConfig';
 
 const MyDocument = () => {
-  //  @todo specify language in HTML?
   return (
-    <Html lang="en">
+    <Html lang={siteConfig.languageCode}>
       <Head />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
         <script
diff --git a/src/siteConfig.js b/src/siteConfig.js
@@ -2,8 +2,12 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-export const siteConfig = {
-  editUrl: 'https://github.com/reactjs/react.dev/tree/main/src/pages',
+exports.siteConfig = {
+  // --------------------------------------
+  // Translations should replace these lines:
+  languageCode: 'en',
+  hasLegacySite: true,
+  // --------------------------------------
   copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc. All Rights Reserved.`,
   repoUrl: 'https://github.com/facebook/react',
   twitterUrl: 'https://twitter.com/reactjs',
diff --git a/vercel.json b/vercel.json
