Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 6570e6cd #630

Closed
wants to merge 67 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
67 commits
Select commit Hold shift + click to select a range
91e7f69
Update tutorial error message to use ConsoleBlock
AhmedBaset Sep 25, 2023
4df3e7c
Remove pitfall and update Next link (#6318)
lunaleaps Sep 26, 2023
62b9b45
Main (#5963)
JustLolo Sep 26, 2023
2dbd195
Fix an incorrect person's name (#6066)
jajimajp Sep 26, 2023
01c3163
fix: wrong parameter name defined in explanation (#6158)
MatanBobi Sep 26, 2023
8afb1ef
Add info about App.js 2024 conference (#6192)
piaskowyk Sep 26, 2023
850327d
Update "Start a new React project" for stable Next.js App Router (#6020)
leerob Sep 28, 2023
d4c214a
Update Page not found to React18 URL (#6320)
SouSingh Sep 28, 2023
1dfc88f
fix: typo in useMemo example (#6330)
alainkaiser Oct 1, 2023
68f417a
Explain how `null` ends up in `ref.current` for React-managed refs (#…
eps1lon Oct 1, 2023
c45fa10
Fix "primatives" typo in cache.md (#6335)
psikoi Oct 5, 2023
3cd1723
Mention `use` as a Suspense-enabled data source (#6340)
sophiebits Oct 6, 2023
9aa84b1
Add Experimental Taint API Docs (#6337)
sebmarkbage Oct 6, 2023
fdad54d
Explain limitations of useSyncExternalStore with concurrency (#6339)
sophiebits Oct 9, 2023
88af66d
Fix comma splice
sophiebits Oct 9, 2023
f2c45ea
Add labs icon to experimental APIs (#6346)
sophiebits Oct 9, 2023
43f4702
Fix typo in typescript.md (#6347)
mattcarrollcode Oct 11, 2023
900a669
Upgrade react-collapsed (#5893)
roginfarrer Oct 11, 2023
e85b71d
Add 'ja' to deployedTranslations (#6351)
smikitky Oct 13, 2023
31b7881
Add GA4 tag to react.dev (#6350)
kmiddleton14 Oct 16, 2023
d22efb3
Added new meetup in Saskatoon - SK (#6341)
galexandrade Oct 17, 2023
90ca701
Add `useFormStatus` Hook API reference documentation (#6314)
mattcarrollcode Oct 17, 2023
5750680
docs: Remove unnecessary `when` (#6344)
locol23 Oct 18, 2023
b68e15a
fix typo in react-dom/hooks (#6355)
dragonsuperf Oct 18, 2023
10574e5
fix: add a missing import statement in useFormStatus.md (#6356)
koba04 Oct 18, 2023
9af01e2
Describing Your UI > Your UI as a tree (#6334)
lunaleaps Oct 19, 2023
16f90a9
Minor fixes to Understand Your UI as a Tree learn doc (#6365)
mattcarrollcode Oct 20, 2023
a0cacd7
Fix onScroll → onWheel typo in common-props (#6364)
insanj Oct 22, 2023
717f9b5
Remove unsupported ga-lite and update existing calls to GA4 (#6366)
kmiddleton14 Oct 24, 2023
bbdbaca
Fixes related to "Your UI as a Tree" (#6374)
smikitky Oct 24, 2023
63f9470
Add Error Boundary to useTransition API docs (#6354)
kmiddleton14 Oct 24, 2023
2779615
Warn about low entropy in taintUniqueValue.md (#6379)
sophiebits Oct 24, 2023
5e40d13
Add useFormState reference (#6338)
davidmccabe Oct 25, 2023
6ef844b
useFormState reference fixes (#6383)
davidmccabe Oct 25, 2023
df3ec65
Fix typo in experimental_taintObjectReference (#6385)
elicwhite Oct 26, 2023
97e61d7
Fix broken links caused by #6164 (#6375)
smikitky Oct 26, 2023
a272f0c
chore: fix typos (#6387)
harish-sethuraman Oct 26, 2023
76c1bde
Using strict equality in the JS example for City Quiz (#6373)
jerrykodes Oct 26, 2023
6a94b72
docs: update link to React Query (#6369)
TkDodo Oct 26, 2023
f6b7f9e
Removed canary: true from useTransition.md (#6389)
kevinfarrugia Oct 26, 2023
4b333ca
Add <form> Component reference documentation (#6312)
mattcarrollcode Oct 26, 2023
5d2113b
typos (#6390)
harish-sethuraman Oct 27, 2023
46b45fb
Add `useOptimistic Hook` API reference documentation (#6377)
kmiddleton14 Oct 27, 2023
b8acf01
Remove meta description from most pages (#6392)
sophiebits Oct 27, 2023
4bdb87b
Try to fix Google titles for directive pages (#6393)
sophiebits Oct 28, 2023
81f1520
Adds Reference Overview Page (#6378)
brianjo Oct 30, 2023
49c2d78
'use server' fleshing out (#6384)
lunaleaps Oct 30, 2023
9c60167
'use client' - flesh out usages and reference (#6362)
lunaleaps Oct 30, 2023
f949428
Add closing </p> tag (#6394)
mixlaab Oct 31, 2023
40a88fa
Fix typoError Mentioned in issue (#6400)
DhanushShettyH Nov 3, 2023
a8790ca
Edits for new "use client" content (#6401)
sophiebits Nov 3, 2023
55b9e04
Remove "canary: true" from `useTransition` in Sidebar (#6411)
smikitky Nov 6, 2023
617065b
Fix style in React Reference Overview (#6410)
smikitky Nov 6, 2023
8727204
fix Illustration and IllustrationBlock alt color on dark mode (#5981)
oxcened Nov 6, 2023
42ca996
Captailize Server Action (#6417)
Huxpro Nov 7, 2023
292e55d
Capitalize Client/Server Component (#6418)
Huxpro Nov 7, 2023
c5a2e15
Capitalize Client in "client modules" (#6419)
Huxpro Nov 7, 2023
721479b
Check for value before passing to gtag (#6415)
kmiddleton14 Nov 7, 2023
eeb0979
Update event label and value name (#6421)
kmiddleton14 Nov 8, 2023
49ebed1
Fix useOptimistic demo bug (#6422)
kmiddleton14 Nov 8, 2023
44f442d
Add space for canary title (#6416)
lunaleaps Nov 8, 2023
fcd0006
Capitalize word "Hook" (#6424)
Huxpro Nov 10, 2023
d3a5f8a
Capitalize word "Fragment" (#6425)
Huxpro Nov 14, 2023
4f9e9a5
Capitalize word "Canary" (#6427)
Huxpro Nov 14, 2023
aa0c547
Fix: incorrect sample code in documentation related to Server action …
nonoakij Nov 21, 2023
6570e6c
Update useSyncExternalStore.md
sophiebits Nov 23, 2023
25e1e38
merging all conflicts
react-translations-bot Nov 27, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.production
Original file line number Diff line number Diff line change
@@ -1 +1 @@
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,12 @@
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"ga-lite": "^2.1.4",
"github-slugger": "^1.3.0",
"next": "^13.4.1",
"next-remote-watch": "^1.0.0",
"parse-numeric-range": "^1.2.0",
"react": "^0.0.0-experimental-16d053d59-20230506",
"react-collapsed": "npm:@gaearon/[email protected]",
"react-collapsed": "4.0.4",
"react-dom": "^0.0.0-experimental-16d053d59-20230506",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1"
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/render_tree.dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/render_tree.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 8 additions & 9 deletions src/components/Layout/Feedback.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

import {useState} from 'react';
import {useRouter} from 'next/router';
import {ga} from '../../utils/analytics';

export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
const {asPath} = useRouter();
Expand Down Expand Up @@ -46,16 +45,16 @@ const thumbsDownIcon = (
);

function sendGAEvent(isPositive: boolean) {
const category = isPositive ? 'like_button' : 'dislike_button';
const value = isPositive ? 1 : 0;
// Fragile. Don't change unless you've tested the network payload
// and verified that the right events actually show up in GA.
ga(
'send',
'event',
'button',
'feedback',
window.location.pathname,
isPositive ? '1' : '0'
);
// @ts-ignore
gtag('event', 'feedback', {
event_category: category,
event_label: window.location.pathname,
event_value: value,
});
}

function SendFeedback({onSubmit}: {onSubmit: () => void}) {
Expand Down
8 changes: 7 additions & 1 deletion src/components/Layout/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@ interface PageProps {
children: React.ReactNode;
toc: Array<TocItem>;
routeTree: RouteItem;
meta: {title?: string; canary?: boolean; description?: string};
meta: {
title?: string;
titleForTitleTag?: string;
canary?: boolean;
description?: string;
};
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
}

Expand Down Expand Up @@ -107,6 +112,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
<>
<Seo
title={title}
titleForTitleTag={meta.titleForTitleTag}
isHomePage={isHomePage}
image={`/images/og-` + section + '.png'}
searchOrder={searchOrder}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Sidebar/SidebarLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function SidebarLink({
{title}{' '}
{canary && (
<IconCanary
title="This feature is available in the latest Canary"
title=" - This feature is available in the latest Canary"
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Sidebar/SidebarRouteTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {useRef, useLayoutEffect, Fragment} from 'react';
import cn from 'classnames';
import {useRouter} from 'next/router';
import {SidebarLink} from './SidebarLink';
import useCollapse from 'react-collapsed';
import {useCollapse} from 'react-collapsed';
import usePendingRoute from 'hooks/usePendingRoute';
import type {RouteItem} from 'components/Layout/getRouteMeta';

Expand Down
6 changes: 3 additions & 3 deletions src/components/Layout/getRouteMeta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ export interface RouteMeta {
order?: number;
}

type TravesalContext = RouteMeta & {
type TraversalContext = RouteMeta & {
currentIndex: number;
};

export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
const ctx: TravesalContext = {
const ctx: TraversalContext = {
currentIndex: 0,
};
buildRouteMeta(cleanedPath, routeTree, ctx);
Expand All @@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
function buildRouteMeta(
searchPath: string,
currentRoute: RouteItem,
ctx: TravesalContext
ctx: TraversalContext
) {
ctx.currentIndex++;

Expand Down
9 changes: 7 additions & 2 deletions src/components/MDX/MDXComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ function Illustration({
src={src}
alt={alt}
style={{maxHeight: 300}}
className="bg-white rounded-lg"
className="rounded-lg"
/>
{caption ? (
<figcaption className="text-center leading-tight mt-4">
Expand Down Expand Up @@ -275,7 +275,12 @@ function IllustrationBlock({
const images = imageInfos.map((info, index) => (
<figure key={index}>
<div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
<img src={info.src} alt={info.alt} height={info.height} />
<img
className="text-primary"
src={info.src}
alt={info.alt}
height={info.height}
/>
</div>
{info.caption ? (
<figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
Expand Down
6 changes: 6 additions & 0 deletions src/components/MDX/Sandpack/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ export function Preview({
rawError = null;
}

// When throwing a new Error in Sandpack - we want to disable the dev error dialog
// to show the Error Boundary fallback
if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
rawError = null;
}

// Memoized because it's fed to debouncing.
const firstLintError = useMemo(() => {
if (lintErrors.length === 0) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/PageHeading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function PageHeading({
{title}
{canary && (
<IconCanary
title="This feature is available in the latest Canary"
title=" - This feature is available in the latest Canary"
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
/>
)}
Expand Down
14 changes: 11 additions & 3 deletions src/components/Seo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {siteConfig} from '../siteConfig';

export interface SeoProps {
title: string;
titleForTitleTag: undefined | string;
description?: string;
image?: string;
// jsonld?: JsonLDType | Array<JsonLDType>;
Expand All @@ -22,6 +23,7 @@ const deployedTranslations = [
'zh-hans',
'es',
'fr',
'ja',
// 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.
Expand All @@ -35,7 +37,7 @@ function getDomain(languageCode: string): string {
export const Seo = withRouter(
({
title,
description = 'The library for web and native user interfaces',
titleForTitleTag,
image = '/images/og-default.png',
router,
children,
Expand All @@ -46,14 +48,20 @@ export const Seo = withRouter(
const canonicalUrl = `https://${siteDomain}${
router.asPath.split(/[\?\#]/)[0]
}`;
const pageTitle = isHomePage ? title : title + ' – React';
// Allow setting a different title for Google results
const pageTitle =
(titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
// Twitter's meta parser is not very good.
const twitterTitle = pageTitle.replace(/[<>]/g, '');
let description = isHomePage
? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
: 'The library for web and native user interfaces';
return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
{title != null && <title key="title">{pageTitle}</title>}
{description != null && (
{isHomePage && (
// Let Google figure out a good description for each page.
<meta name="description" key="description" content={description} />
)}
<link rel="canonical" href={canonicalUrl} />
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2022/03/08/react-18-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -224,8 +224,8 @@ For more information, see the [Automatic batching deep dive](https://github.com/

In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:

* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).

React 18 also introduces new APIs for concurrent rendering such as `startTransition`, `useDeferredValue` and `useId`, which we share more about in the [release post](/blog/2022/03/29/react-v18).

Expand Down
11 changes: 5 additions & 6 deletions src/content/blog/2022/03/29/react-v18.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@ startTransition(() => {
Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.


* `useTransition`: a hook to start transitions, including a value to track the pending state.
* `startTransition`: a method to start transitions when the hook cannot be used.
* `useTransition`: a Hook to start transitions, including a value to track the pending state.
* `startTransition`: a method to start transitions when the Hook cannot be used.

Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info).

Expand Down Expand Up @@ -229,7 +229,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the

#### useId {/*useid*/}

`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
`useId` is a new Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).

> Note
>
Expand All @@ -245,15 +245,15 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the

#### useSyncExternalStore {/*usesyncexternalstore*/}

`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
`useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).

> Note
>
> `useSyncExternalStore` is intended to be used by libraries, not application code.

#### useInsertionEffect {/*useinsertioneffect*/}

`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
`useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).

> Note
>
Expand Down Expand Up @@ -339,4 +339,3 @@ See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for st
* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739) by [@michenly](https://github.com/michenly))
* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea))
* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi))

Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http

<Intro>

[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.

</Intro>

Expand All @@ -28,7 +28,7 @@ We’re working together with Vercel and Shopify to unify bundler support for sh

## Asset Loading {/*asset-loading*/}

Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more.
We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.

We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts.
Expand All @@ -41,7 +41,7 @@ Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great

We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model.

Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.

We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.

Expand Down
Loading
Loading