主にフロントエンド周りの開発を担当しているフンです。
React.jsは、Facebookが開発・メンテナンスしているオープンソースのJavaScriptライブラリで、現代のウェブ開発において欠かせない存在となっています。
ShareWisでも一部のプロジェクトでReact.jsを使っています。
その効率性と柔軟性で知られるReactは、React 19で最近新しいアーキテクチャを導入し、開発者がユーザーインターフェースを構築する方法を革命的に変えようとしています。この記事ではReact 19の新機能をいくつか紹介します。
Reactコンパイラ（開発中）
Reactは現在、次世代のコンパイラを開発中です。この新しい技術はすでにInstagramで活用されており、React 19のリリース候補（RC）版で利用可能です。
新しいコンパイラのメリットとして、まず、UIの状態変化に応じたコンポーネントの再レンダリングを、このコンパイラが自動で管理してくれることが挙げられます。これにより、開発者は手動でUIや状態の変更を気にする必要がなくなります。さらに、React 19ではuseMemoやuseCallbackの呼び出しが不要となり、コンパイラが自動的にコンポーネントを最適化してくれます。
そして、エラーハンドリングもシンプルになりました。Promiseを投げるだけでエラーに対応できるのです。これまで面倒だったエラー処理が、簡単に済むようになります。
React Server Components（RSCs）
React Server Components（RSCs）は、Reactが提供する次世代の革新的なコンポーネントです。サーバーとクライアントの両方でレンダリングできる新しい仕組みを導入し、これまで以上に効率的で柔軟なアプリケーション開発を実現します。
RSCsの特徴的なポイントは、サーバー側でのレンダリングが可能な点です。ビルド時にサーバー側でコンテンツがレンダリングされるため、データベースから取得したデータやユーザーごとに異なるコンテンツをサーバーで処理し、クライアントにはすでに構築されたHTMLを送ることができます。これにより、クライアント側の負荷を減らし、より高速で効率的なユーザー体験を提供します。
一方で、クライアント側ではインタラクティブな要素や動的コンテンツをレンダリングするため、リアクティブで応答性の高いUIも維持されます。つまり、サーバーとクライアントのそれぞれの強みを生かした最適なレンダリングが可能です。
RSCsは、特に複雑なアプリケーションやパフォーマンスの重要なプロジェクトにおいて、その真価を発揮する技術です。これからのReact開発を加速させる要素として、以下の利点が挙げられます。
RSCsの利点: パフォーマンスの向上
サーバーにレンダリングをオフロードすることで、クライアントに送信されるJavaScriptの量を減らし、初期ロード時間を短縮し、特に低性能デバイスや遅いネットワークでのパフォーマンスを向上させます。
RSCsの利点: 開発者体験の向上
RSCsは、サーバーとクライアントのレンダリングに同じプログラミングモデルを使用できるため、統一された開発体験を提供します。
RSCsの利点: SEOの強化
サーバーでレンダリングされたコンテンツは検索エンジンにインデックスされやすく、動的コンテンツに依存するウェブアプリケーションのSEOを改善します。
RSCsの利点: データ取得の簡素化
RSCsはサーバーでデータを取得し、それをクライアントに渡すのを容易にし、複雑なクライアントサイドのデータ取得ロジックを減少させます。
Actions
Actionsは、Reactアプリケーションでのデータ変更や状態更新を簡素化する新機能です。これにより、保留状態、エラー、楽観的更新、連続リクエストの管理のための手動コードが不要になります。
Actionsの利点: 自動保留状態
Actionsはデータ取得中の保留状態を自動で管理し、リクエストが進行中でもUIは応答性を保ちます。
Actionsの利点: 簡素化されたエラーハンドリング
Actionsは組み込みのエラーハンドリングを提供し、リクエストが失敗した場合にエラーバウンダリを表示し、楽観的更新を自動で元に戻します。
Actionsの利点: 楽観的更新
useOptimisticフックを使用すると、データ送信中にユーザーに即時フィードバックを表示できます。
Actionsの利点: フォーム処理
フォーム要素はactionおよびformActionプロパティを使用してActionsの機能を活用できます。これにより、フォーム送信と成功後の自動フォームリセットが簡素化されます。
新しいReact Hooks
React 19では、useMemo、forwardRef、useEffect、useContextの使用方法が変更され、新しいフックであるuseが導入されます。
新しいReact Hooksの詳細: useMemo()
React 19以降、useMemo()フックを使用する必要はなくなります。Reactコンパイラが自動でメモ化します。
新しいReact Hooksの詳細: forwardRef()
refはforwardRef()フックを使用せずにプロパティとして渡されるようになります。これによりコードが簡素化されます。
新しいReact Hooksの詳細: use()
useメソッドはフックとしてではなく、React APIの一部としてリリースされます。useはコンポーネントやフック内でのみ呼び出すことができ、PromiseやContextの値を読み取ることができます。
const value = use(resource);新しいReact Hooksの詳細: useFormStatus
useFormStatusフックは、フォーム送信中のステータス情報を提供します。このフックはreact-domからインポートします。
import { useFormStatus} from 'react-dom';
const { pending, data } = useFormStatus();新しいReact Hooksの詳細: useFormState
フォーム送信の結果に基づいて状態を更新するためのフックです。
const [state, formAction] = useFormState(fn, initialState, permalink?);新しいReact Hooksの詳細: useOptimistic
useOptimisticは、非同期アクションが進行中の間に異なる状態を表示するためのReactフックです。
const [optimisticMessage, addOptimisticMessage] = useOptimistic(state, updatefn);このフックは、リクエストが成功することを前提にUIを即座に更新します。ユーザーはアクションが完了する前に楽観的な結果を目にすることができます。
React 19の新機能を活用し、次世代のウェブ開発を一緒に進めていきましょう！
（フン）
New Features in React 19
React.js, an open-source JavaScript library maintained by Facebook, has become a cornerstone of modern web development. Renowned for its efficiency and flexibility, React has recently introduced a new architecture that promises to revolutionize the way developers build user interfaces.
React compiler (Under Construction)
React is working on implementing a new compiler. Currently, Instagram is already leveraging this technology, and it requires React 19 RC and will be released in future versions of React.This compiler manages component rendering for the UI state change itself which eliminates the need for developers to change state and UI. React19 also eliminated the need to use useMemo and useCallback methods calls, instead, the compiler memoizes and optimizes the components as per their requirements and removes the need for hooks. With React19 compiler handling errors has become more simpler with the use of throwing premises
React Server components
React Server Components (RSCs) are a new type of component that allow developers to write React components that can be rendered both on the server and the client, with the server rendering happening at build time. This means that the server can render parts of a page that are specific to the user, such as personalized content or data fetched from a database, while the client can render the rest of the page, such as interactive elements or dynamic content.
Key Features:
Improved Performance
By offloading rendering to the server, React Server Components can reduce the amount of JavaScript sent to the client, leading to faster initial load times and improved performance, especially on low-powered devices or slow networks.
Better Developer Experience
RSCs provide a more unified development experience, allowing developers to use the same programming model for both server and client rendering.
Enhanced SEO
Server-rendered content is more easily indexed by search engines, improving SEO for web applications that rely on dynamic content.
Simplified Data Fetching
RSCs make it easier to fetch data on the server and pass it down to the client, reducing the need for complex client-side data fetching logic.
Actions
A new feature that simplifies handling data mutations and state updates in your React applications. It eliminates the need for manual code to manage pending states, errors, optimistic updates, and sequential requests.Key Features
Automatic Pending State
Actions automatically manage the pending state during data fetching. The UI remains responsive while the request is ongoing.
Simplified Error Handling
Actions provide built-in error handling. You can display error boundaries when a request fails, and it automatically reverts optimistic updates.
Optimistic Updates
The useOptimistic hook allows you to show users immediate feedback while data is being submitted.
Form Handling
Form elements can now use the action and formAction props to leverage Actions functionality. This simplifies form submissions and automatic form resets after successful actions.
New React Hooks
In React 19, the way we use useMemo, forwardRef, useEffect, and useContext will change. This is mainly because a new hook, use, will be introduced.
useMemo()
We won’t need to use the useMemo() hook after React19, as React Compiler will memoize by itself.
forwardRef()
ref will be now passed as props rather than using the forwardRef() hook. This will simplify the code. So after React19, we won’t need to use forwardRef().
use()
The use method has not been released as a hook, but as part of the React API. Unlike React hooks, use can also be called inside if and for statements. However, use can only be called inside a Component or a Hook.
use lets you read the value of a Promise or a Context inside a component.
Here is the syntax of hook:
const value = use(resource);
useFormStatus()
The useFormStatus hook gives information about the form’s status while submitting the form. This hook is part of the React DOM, so import it from react-dom:
import {useFormStatus} from ‘react-dom’
This hook can be used in the following way:
const { pending, data } = useFormStatus();
The hook does not take any arguments and returns an object containing information about the form’s status. It returns:
- pending, which is a boolean value that indicates whether the form is in pending state.
- data, which is an object of type FormData, and contains the values of the form fields.
This hook can only be used inside a component that has a <form> element as its parent. It only returns status information of the parent form element and not the <form> element rendered in the same component.
useFormState()
It allows you to update state based on the result of a form submission.
Here’s the syntax:
const [state, formAction] = useFormState(fn, initialState, permalink?);
- fn: the function to be called when the form is submitted or button is pressed.
- initialState: the value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
- permalink: this is optional. A URL or page link, if fn is going to be run on server then the page will redirect to permalink.
This hook will return:
- state: the initial state will be the value we have passed to initialState.
- formAction: an action that will be passed to the form action. The return value of this will be available in the state.
useOptimistic()
useOptimistic is a React Hook that lets you show a different state while an async action is underway, according to the React docs.
This hook will help enhance the user experience and should result in faster responses. This will be useful for applications that need to interact with the server.
Here’s the syntax of the useOptimistic hook:
const [ optimisticMessage, addOptimisticMessage] = useOptimistic(state, updatefn)
The useOptimistic hook will immediately update the UI assuming the request will succeed. The name is “optimistic” because the user will see the optimistic (success) result of performing an action, even though the action actually takes time to complete.
(Hung)