What’s new in React 19

  const [error, setError] = useState(null);

  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {

    setIsPending(true);

    const error = await updateRequest();

    setIsPending(false);

    if (error) {

      setError(error);

      return;

    }

    // ... do other

  }

  return (

    <div>

      <Button onClick={handleSubmit} disabled={isPending}>

        Submit

      </Button>

      {error && <p>{error}</p>}

    </div>

  )

  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {

    startTransition(async () => {

      const error = await updateRequest();

      if (error) {

        setError(error);

        return;

      } 

      // ... do other

    })

  };

  return <div>...</div>

const [error, submitAction, isPending] = useActionState(

  async (previousState, newName) => {

    const error = await updateName(newName);

    if (error) {

      // You can return any result of the action.

      // Here, we return only the error.

      return error;

    }

    // handle success

    return null;

  },

  null,

);

<form action={actionFunction}>

import {useFormStatus} from 'react-dom';

function DesignButton() {

  const {pending} = useFormStatus();

  return <button type="submit" disabled={pending} />

}

function ChangeName({currentName, onUpdateName}) {

  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async formData => {

    const newName = formData.get("name");

    setOptimisticName(newName);

    const updatedName = await updateName(newName);

    onUpdateName(updatedName);

  };

  return (

    <form action={submitAction}>

      <p>Your name is: {optimisticName}</p>

      <p>

        <label>Change Name:</label>

        <input

          type="text"

          name="name"

          disabled={currentName !== optimisticName}

        />

      </p>

    </form>

  );

}

import {use} from 'react';

function Comments({commentsPromise}) {

  // `use` will suspend until the promise resolves.

  const comments = use(commentsPromise);

  return comments.map(comment => <p key={comment.id}>{comment}</p>);

}

function Page({commentsPromise}) {

  // When `use` suspends in Comments,

  // this Suspense boundary will be shown.

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <Comments commentsPromise={commentsPromise} />

    </Suspense>

  )

}

function Button({ show, children }) {

  if (show) {

    const theme = use(ThemeContext);

    const className = "button-" + theme;

    return <button className={className}>{children}</button>;

  }

  return false;

}

import { prerender } from 'react-dom/static';

async function handler(request) {

  const {prelude} = await prerender(<App />, {

    bootstrapScripts: ['/main.js']

  });

  return new Response(prelude, {

    headers: { 'content-type': 'text/html' },

  });

}

// 伪代码：构建脚本核心逻辑

import { prerender, prerenderToNodeStream } from 'react-dom/static';

import fs from 'fs';

const pages = [

  { path: '/about', component: AboutPage },

  { path: '/blog', component: BlogPage }

];

for (const page of pages) {

  // 根据页面大小选择渲染方式

  const renderer = page.isLarge ? prerenderToNodeStream : prerender;

  // 执行预渲染

  const result = await renderer(<page.component {...page.props} />);

  // 保存为 HTML 文件

  if (typeof result === 'string') {

    fs.writeFileSync(`dist${page.path}.html`, result);

  } else {

    // 流式处理

    const writable = fs.createWriteStream(`dist${page.path}.html`);

    result.pipe(writable);

  }

}

function MyInput({placeholder, ref}) {

  return <input placeholder={placeholder} ref={ref} />

}

//...

<MyInput ref={ref} />

const ThemeContext = createContext('');

function App({children}) {

  return (

    <ThemeContext value="dark">

      {children}

    </ThemeContext>

  );  

}

<input

  ref={(ref) => {

    // ref created

    // NEW: return a cleanup function to reset

    // the ref when element is removed from DOM.

    return () => {

      // ref cleanup

    };

  }}

/>

- <div ref={current => (instance = current)} />

+ <div ref={current => {instance = current}} />

function Search({deferredValue}) {

  // On initial render the value is ''.

  // Then a re-render is scheduled with the deferredValue.

  const value = useDeferredValue(deferredValue, '');

  return (

    <Results query={value} />

  );

}

function App() {

  const [text, setText] = useState('');

  const deferredText = useDeferredValue(text);

  // 用 memo 避免不必要的重新渲染

  const searchResults = useMemo(() => {

    return <HeavyComponent text={deferredText} />;

  }, [deferredText]);

  return (

    <div>

      <input

        type="text"

        value={text}

        onChange={(e) => setText(e.target.value)}

      />

      {/* 延迟渲染部分会显示旧内容，直到新内容准备好 */}

      <Suspense fallback={<Loading />}>

        {searchResults}

      </Suspense>

    </div>

  );

}

function BlogPost({post}) {

  return (

    <article>

      <h1>{post.title}</h1>

      <title>{post.title}</title>

      <meta name="author" content="Josh" />

      <link rel="author" href="https://twitter.com/joshcstory/" />

      <meta name="keywords" content={post.keywords} />

      <p>

        Eee equals em-see-squared...

      </p>

    </article>

  );

}

function ComponentOne() {

  return (

    <Suspense fallback="loading...">

      <link rel="stylesheet" href="foo" precedence="default" />

      <link rel="stylesheet" href="bar" precedence="high" />

      <article class="foo-class bar-class">

        {...}

      </article>

    </Suspense>

  )

}

function ComponentTwo() {

  return (

    <div>

      <p>{...}</p>

      <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar

    </div>

  )

}

function MyComponent() {

  return (

    <div>

      <script async={true} src="..." />

      Hello World

    </div>

  )

}

function App() {

  <html>

    <body>

      <MyComponent>

      ...

      <MyComponent> // won't lead to duplicate script in the DOM

    </body>

  </html>

}

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'

function MyComponent() {

  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly

  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font

  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet

  prefetchDNS('https://...') // when you may not actually request anything from this host

  preconnect('https://...') // when you will request something but aren't sure what

}

<!-- the above would result in the following DOM/HTML -->

<html>

  <head>

    <!-- links/scripts are prioritized by their utility to early loading, not call order -->

    <link rel="prefetch-dns" href="https://...">

    <link rel="preconnect" href="https://...">

    <link rel="preload" as="font" href="https://.../path/to/font.woff">

    <link rel="preload" as="style" href="https://.../path/to/stylesheet.css">

    <script async="" src="https://.../path/to/some/script.js"></script>

  </head>

  <body>

    ...

  </body>

</html>