Merge branch 'main' of https://github.com/reactjs/react.dev into sync…

…-b9eea4da

.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/content/reference/react/Component.md

@@ -1393,7 +1393,7 @@ Then you can wrap a part of your component tree with it:
 
 If `Profile` or its child component throws an error, `ErrorBoundary` will "catch" that error, display a fallback UI with the error message you've provided, and send a production error report to your error reporting service.
 
-You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://aweary.dev/fault-tolerance-react/) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
+You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://www.brandondail.com/posts/fault-tolerance-react) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
 
 <Note>
 

src/hooks/usePendingRoute.ts

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