<div id="readability-page-1" class="page"><article id="article-show-container" data-article-id="2150993" data-article-slug="you-dont-need-update-to-react-19-2opk" data-author-id="201866" data-author-name="Composite" data-author-username="composite" data-co-author-ids="" data-path="/composite/you-dont-need-update-to-react-19-2opk" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false" lang="en">
        <header id="main-title">

          <div>
                <p><a href="/composite"><img src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F201866%2F5014b724-95d6-43af-8561-79a14911a196.png" width="40" height="40" alt="Composite"></a>
                </p>
                
              </div>
        </header>

        <div data-article-id="2150993" id="article-body">
              <p>When you saw the <a href="https://react.dev/blog/2024/12/05/react-19" target="_blank" rel="noopener noreferrer">new features listed on the official blog</a>:</p>

<ul>
<li>
<code>useTransition</code>: Just <code>startTransition</code> with pending state.</li>
<li>
<code>useActionState</code>: <code>useTransition</code> + <code>useState</code>
</li>
<li>Form action as function: VS <code>react-hook-form</code>
</li>
<li>
<code>useFormStatus</code>: <code>useContext(&lt;form&gt;)</code>
</li>
<li><strong><code>useOptimistic</code>: HERE COMES A NEW CHALLENGER!</strong></li>
<li><strong><code>use</code>: <code>React.lazy</code> without dynamic import + <code>@tanstack/query</code></strong></li>
<li>Server component and Server Action: for SSR Only</li>
<li>
<code>ref</code> as Prop: Yes. you can cleanup as callback ref. This feature has made other JS libraries more friendly, making it worth competing with other frontend tech stacks.</li>
<li>Hydration error: for SSR Only 2</li>
<li>
<code>Context</code> is <code>Provider</code> by default: The beginning of the end for class components.</li>
<li>
<code>&lt;Suspense&gt;</code> waterfall issue: <a href="https://github.com/facebook/react/issues/29898#issuecomment-2477449973" target="_blank" rel="noopener noreferrer">RESOLVED!</a>
</li>
<li>
<code>&lt;meta&gt;</code>, <code>&lt;link&gt;</code>, <code>&lt;script async&gt;</code>, <code>&lt;custom-element&gt;</code>: so what?</li>
</ul>

<h2>
  <a name="recap" href="#recap">
  </a>
  Recap
</h2>

<h3>
  <a name="you-are-ready-and-good-to-upgrade" href="#you-are-ready-and-good-to-upgrade">
  </a>
  You are ready and good to upgrade!
</h3>

<ul>
<li>Next.js with App Router</li>
</ul>

<h3>
  <a name="no-its-not-worth-upgrading" href="#no-its-not-worth-upgrading">
  </a>
  No, it's not worth upgrading...
</h3>

<ul>
<li>Any SPA stack</li>
<li>Full stack framework other than Next.js (Pages router included)</li>
<li>Any SSG based framework</li>
<li>React Native</li>
</ul>

<h2>
  <a name="conclusion" href="#conclusion">
  </a>
  Conclusion
</h2>

<p>This version of React is a major update with the main goal of enhancing server functionality. So you don't need to get excited, and you don't need to upgrade quickly—just keep your version in your existing environment. React is meant to be a library like that. such as Java...</p>


          </div>
          
  



      </article></div>

Ukjin Yang

When you saw the new features listed on the official blog:
useTransition: Just startTransition with pending state.
useActionState: useTransition + useState
Form action as function: VS react-hook-form
useFormStatus: useContext(<form>)
useOptimistic: HERE COMES A NEW CHALLENGER!
use: React.lazy without dynamic import + @tanstack/query
Server component and Server Action: for SSR Only
ref as Prop: Yes. you can cleanup as callback ref. This feature has made other JS libraries more friendly, making it worth competing with other frontend tech stacks.
Hydration error: for SSR Only 2
Context is Provider by default: The beginning of the end for class components.
<Suspense> waterfall issue: RESOLVED!
<meta>, <link>, <script async>, <custom-element>: so what?
Next.js with App Router
Any SPA stack
Full stack framework other than Next.js (Pages router included)
Any SSG based framework
React Native
This version of React is a major update with the main goal of enhancing server functionality. So you don't need to get excited, and you don't need to upgrade quickly—just keep your version in your existing environment. React is meant to be a library like that. such as Java...

You don't need update to React 19

댓글