React 19? ????? ????? ?? npm?? ??? ? ????! ??? ??? ??? ???? ?? ? ?? ??? ????? ??? ???? ???? UI ?? ??? ?????? ???????. React 19? ??? ??? ????? ??? ??? ???? ??? ????? ?????.

React 19? ?? ????

1. ?? ? ??? ??

??? ??? ??, ?? ??, ?? ??, ??? ????? ?? ??? ?? ??? ??????. useTransition ?? ??? useActionState ??? ???? ??? ??? ? ????.

?? ??? ???? ?????.

? ?? ?? ??? ?????.

action ?? formAction ??? ????

??? ??? ?? ??? ?????.

?: useActionState? ??? ???? ??

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

1. useOptimistic? ??? Optimistic ????

??? useOptimistic ??? ???? ??? ??? ???? ?? ????? ???? ???? ??? ? ????.

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>
      <input type="text" name="name" />
    </form>
  );
}

1. API ??

?? API? ???? ??? ????? ??? ???? ????? ?? ??? ?? ?? ??? ?????.

import { use } from 'react';
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

1. ???? ????? ??

React 19?

, , ??? ?? ???? ?? ????? ??? ???? ????? ??? ?????.

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="author" content="Author Name" />
    </article>
  );
}

1. ??? ????? ? ???? ??

React 19??? ??? ????? ?????.

.

? ???? ????? ??? ?????

?? ?? ?? ??? ??? ????? ????? ?? ?? ? ??? ?? ??? ?????.

<link rel="stylesheet" href="styles.css" precedence="default" />
<script async src="script.js"></script>

1. ?? ?? ?? ? ??

React ?? ?? ??? ?? ?????? ?? ??? ?? ???? ? ????. ?? ??("use server" ???? ?? ????)? ???? ????? ?? ??? ??? ??? ??? ???? ??? ? ????.

1. ?? ?? ??

React 19? ?? ??? ???? ???? ?? ??? ?? ???? ?????. ?? ???? ???? ?? ??? ?? onCaughtError, onUncaughtError ? onRecoverableError? ??? ? ????.

1. ???? ??

?? ????? ?? ref? prop?? ??? ? ????,forwardRef? ???? ?? ??? ??????.

1. ?? ? ?? ??

React 19? ???? ?? ?????? ?? ????? ?? ??? ??? ?? ??? ???? ???? ?? ??? ?????.

1. ??? ?? ??

preload ? preinit? ?? ??? ?? ?? API? ???? ?? ???:

import { preload, preinit } from 'react-dom';
preinit('script.js', { as: 'script' });
preload('font.woff', { as: 'font' });

????? ??

??? ??? React 19 ????? ???(https://react.dev/blog/2024/12/05/react-19)? ????. ?? ?? ??? ??? ????.

?? ?? ??(???? ???? ??)

? ??? ???

React? ?? ????? ???? ???? ???????.

?? ?????

npm? ?? ????? React 19? ????????.

npm ?? React@19 React-dom@19

? ??? ??? ?? ??? ?? ? ?? ???? ???? ?? React 19 ??(https://react.dev/blog/2024/12/05/react-19)? ?????.

React 19? ????? ???? ??? ???? ??? ??? ??????? ??? ?? ??? ??? ???? ??? ?????. ?? ??? ??? ???!

? ??? React ?? ???: ??? ?? ? ????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!