Merge pull request #512 from reactjs/sync-b9eea4da

Sync with react.dev @ b9eea4d

.eslintrc

@@ -5,7 +5,8 @@
  "plugins": ["@typescript-eslint"],
  "rules": {
  "no-unused-vars": "off",
- "@typescript-eslint/no-unused-vars": "warn"
+ "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+ "react-hooks/exhaustive-deps": "error"
  },
  "env": {
  "node": true,

src/components/Layout/HomeContent.js

@@ -8,12 +8,10 @@ import {
  useState,
  useContext,
  useId,
- Fragment,
  Suspense,
  useEffect,
  useRef,
  useTransition,
- useReducer,
 } from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
@@ -26,7 +24,6 @@ import {IconSearch} from 'components/Icon/IconSearch';
 import {Logo} from 'components/Logo';
 import Link from 'components/MDX/Link';
 import CodeBlock from 'components/MDX/CodeBlock';
-import {IconNavArrow} from 'components/Icon/IconNavArrow';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
 
@@ -67,14 +64,6 @@ function Para({children}) {
  );
 }
 
-function Left({children}) {
- return (
- <div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
- {children}
- </div>
- );
-}
-
 function Center({children}) {
  return (
  <div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
@@ -90,19 +79,23 @@ function FullBleed({children}) {
 }
 
 function CurrentTime() {
- const msPerMinute = 60 * 1000;
- const date = new Date();
- let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
-
+ const [date, setDate] = useState(new Date());
  const currentTime = date.toLocaleTimeString([], {
  hour: 'numeric',
  minute: 'numeric',
  });
- let [, forceUpdate] = useReducer((n) => n + 1, 0);
  useEffect(() => {
- const timeout = setTimeout(forceUpdate, nextMinute - Date.now());
+ const msPerMinute = 60 * 1000;
+ let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
+
+ const timeout = setTimeout(() => {
+ if (Date.now() > nextMinute) {
+ setDate(new Date());
+ }
+ }, nextMinute - Date.now());
  return () => clearTimeout(timeout);
  }, [date]);
+
  return <span suppressHydrationWarning>{currentTime}</span>;
 }
 
@@ -831,7 +824,7 @@ function ExampleLayout({
  .filter((s) => s !== null);
  setOverlayStyles(nextOverlayStyles);
  }
- }, [activeArea]);
+ }, [activeArea, hoverTopOffset]);
  return (
  <div className="lg:pl-10 lg:pr-5 w-full">
  <div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
@@ -1211,7 +1204,7 @@ function useNestedScrollLock(ref) {
  window.removeEventListener('scroll', handleScroll);
  clearInterval(interval);
  };
- }, []);
+ }, [ref]);
 }
 
 function ExamplePanel({
@@ -1220,7 +1213,6 @@ function ExamplePanel({
  noShadow,
  height,
  contentMarginTop,
- activeArea,
 }) {
  return (
  <div

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -54,6 +54,7 @@ export function SidebarLink({
  ref={ref}
  title={title}
  target={target}
+ passHref
  aria-current={selected ? 'page' : undefined}
  className={cn(
  'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',

src/components/Layout/SidebarNav/SidebarNav.tsx

@@ -5,7 +5,6 @@
 import {Suspense} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
-import {Search} from 'components/Search';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
 import type {RouteItem} from '../getRouteMeta';

src/components/Layout/TopNav/TopNav.tsx

@@ -22,9 +22,8 @@ import {IconSearch} from 'components/Icon/IconSearch';
 import {Search} from 'components/Search';
 import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
-import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
-import {SidebarLink} from '../Sidebar';
 
 declare global {
  interface Window {

src/components/Layout/getRouteMeta.tsx

@@ -68,7 +68,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
  currentIndex: 0,
  };
  buildRouteMeta(cleanedPath, routeTree, ctx);
- const {currentIndex, ...meta} = ctx;
+ const {currentIndex: _, ...meta} = ctx;
  return {
  ...meta,
  breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],

src/components/MDX/BlogCard.tsx

@@ -18,6 +18,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
  return (
  <Link
  href={url as string}
+ passHref
  className="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark">
  <div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
  <div className="flex flex-row gap-3 w-full">

src/components/MDX/MDXComponents.tsx

@@ -369,7 +369,8 @@ function YouTubeIframe(props: any) {
 }
 
 function Image(props: any) {
- return <img className="max-w-[calc(min(700px,100%))]" {...props} />;
+ const {alt, ...rest} = props;
+ return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
 }
 
 export const MDXComponents = {

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -54,7 +54,6 @@ export const CustomPreset = memo(function CustomPreset({
 
 const SandboxShell = memo(function SandboxShell({
  showDevTools,
- onDevToolsLoad,
  devToolsLoaded,
  providedFiles,
  lintErrors,

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -90,15 +90,17 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
  } else {
  return;
  }
- }, [isMultiFile]);
+
+ // Note: in a real useEvent, onContainerResize would be omitted.
+ }, [isMultiFile, onContainerResize]);
 
  const handleReset = () => {
  /**
  * resetAllFiles must come first, otherwise
- * the previous content will appears for a second
+ * the previous content will appear for a second
  * when the iframe loads.
  *
- * Plus, it should only prompts if there's any file changes
+ * Plus, it should only prompt if there's any file changes
  */
  if (
  sandpack.editorState === 'dirty' &&

src/components/MDX/Sandpack/Preview.tsx

@@ -49,7 +49,6 @@ export function Preview({
  errorScreenRegisteredRef,
  openInCSBRegisteredRef,
  loadingScreenRegisteredRef,
- status,
  } = sandpack;
 
  if (

src/components/MDX/TeamMember.tsx

@@ -7,7 +7,6 @@ import Image from 'next/image';
 import {IconTwitter} from '../Icon/IconTwitter';
 import {IconGitHub} from '../Icon/IconGitHub';
 import {ExternalLink} from '../ExternalLink';
-import {IconNewPage} from 'components/Icon/IconNewPage';
 import {H3} from './Heading';
 import {IconLink} from 'components/Icon/IconLink';
 

src/components/Search.tsx

@@ -5,11 +5,10 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import Router from 'next/router';
-import {lazy, useCallback, useEffect} from 'react';
+import {lazy, useEffect} from 'react';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
 import {siteConfig} from 'siteConfig';
-import cn from 'classnames';
 
 export interface SearchProps {
  appId?: string;

src/hooks/usePendingRoute.ts

@@ -33,7 +33,7 @@ const usePendingRoute = () => {
  events.off('routeChangeComplete', handleRouteChangeComplete);
  clearTimeout(routeTransitionTimer);
  };
- }, []);
+ }, [events]);
 
  return pendingRoute;
 };