React 19? ?? ???? ?? ?? JavaScript ?????? ??? ?? ??? ??? ??? ???????. ? ??? ?????? React 19? React 18? ?? ?? ???? ????, ??????? ???? ?? ??? ????, ? ?? ?? ?? ??? ???????. ???? ???!

React 19? ?? ??

1. ??? ????

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

?:

// React 18
const MemoizedComponent = React.memo(() => {
  return <div>Optimized Component</div>;
});

// React 19
function Component() {
  return <div>Automatically Optimized!</div>;
}

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

2. ?? ??

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

?:

// React 18
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // Renders twice in React 18
}, 1000);

// React 19
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // Renders only once in React 19
}, 1000);

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

3. ??? ?? ? ???(SSR)

React 19? ?? Suspense SSR? ?? SSR ??? ?? ??????.

?:

// React 19
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <AsyncComponent />
    </Suspense>
  );
}

? ?? ??? ?? SSR ? ??? ??? ????? ?? ????? ??? ? ???? ?? ??? ?? ??? ???? SEO? ?????.

4. ?? ?? ??

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

?:

// React 19
function App() {
  const [isPriority, startTransition] = useTransition();

  return (
    <div>
      <button onClick={() => startTransition(() => setCount(count + 1))}>
        Increment
      </button>
      {isPriority ? <PriorityContent /> : <NormalContent />}
    </div>
  );
}

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

5. ?? ?? ???

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

?:

// React 19
import { preload, preinit } from 'react-dom';

function App() {
  useEffect(() => {
    preload('/heavy-component.js', { as: 'script' });
    preinit('/styles.css', { as: 'style' });
  }, []);

  return <div>Optimized Asset Loading</div>;
}

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

React 19? ???????? ??? ??????

1. ??? ??: React Compiler ? ??? SSR ???? ??? ??? ???? ???? ?????? ??? ?????.

2. ???? ??: ?? ??? ? ??? ?? ??? ?? ???? ?? ???? ???? ???? ???? ??????.

3. ? ?? ??? ??: ?? ?? ?? ? ???? ?? ???? ?? ? ???? ???? ??? ??????? ??????.

4. ?? ??: React 19? ???? React ??? ?? ??? ?? ??? ?? ??????? ?? ??? ?????.

5. ??? TypeScript ??: React 19? ??? TypeScript ??? ????? ??? ??? ??????? ? ?? ??? ? ????.

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

1. JSX ?? ?? ??: React 19??? ??? JSX ??? ???? ???.

// React 18
const MemoizedComponent = React.memo(() => {
  return <div>Optimized Component</div>;
});

// React 19
function Component() {
  return <div>Automatically Optimized!</div>;
}

1. ??? API ??: ReactDOM.render ? ReactDOM.hydrate? ?? ?? API? ReactDOM.createRoot ? ReactDOM.hydrateRoot? ?? ???????.

// React 18
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // Renders twice in React 18
}, 1000);

// React 19
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // Renders only once in React 19
}, 1000);

1. ?? ?? ?? ??: React 19?? onUncaughtError ? onCaughtError? ?? ?? ??? ?? ??? ??? ???????.

// React 19
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <AsyncComponent />
    </Suspense>
  );
}

1. Ref ??: React 19??? ref? props? ?? ??? ? ???? ?? ??? ForwardRef? ???? ????.

// React 19
function App() {
  const [isPriority, startTransition] = useTransition();

  return (
    <div>
      <button onClick={() => startTransition(() => setCount(count + 1))}>
        Increment
      </button>
      {isPriority ? <PriorityContent /> : <NormalContent />}
    </div>
  );
}

1. ??? ?? API: React 19??? ??? ?? ???? ?? ?? ?? API? ??????.

// React 19
import { preload, preinit } from 'react-dom';

function App() {
  useEffect(() => {
    preload('/heavy-component.js', { as: 'script' });
    preinit('/styles.css', { as: 'style' });
  }, []);

  return <div>Optimized Asset Loading</div>;
}

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

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

? ??? React vs React ?? ?? ? ?????? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!