今週は、新しい React 19 のアップデートとフックについて話します。これらの新しいアップデートをいくつか試して使用してみたところ、開発者がアプリ、特にインタラクティブなフォーム関連のアプリケーションを構築する際に行う厳しい作業の一部が簡素化されたことに同意するほかありません。

私と一緒に、これらの新しいアップデートのいくつかを探索しましょう。

React コンパイラー: React コンパイラーは React コードを選択し、それをブラウザー用の JavaScript コードに変換し、コンポーネントまたはユーザー インターフェイスの状態を管理します。この特異なアクションは、アプリケーションのパフォーマンスを最適化するのに役立ちます。

useMemo フック、useCallback フック、および React.Memo に精通している場合は、これらがコンポーネントのメモ化 (将来の使用に備えて値や関数の保存) に役立つため、再作成する必要がないことが理解できるでしょう。状態変化がないときにレンダリングします。状態に変化があると、React は問題のコンポーネントとその子を再レンダリングします。コードに変更がない場合、コンポーネントはそのまま残り、将来のためにコンポーネントまたはフック内の以前のメモリ、値、状態を保持します。用途;これにより、コンポーネントのパフォーマンスが最適化されます。これは、前述のフックを手動で呼び出す必要がなく、React Compiler が自動的に行うこととまったく同じです。

フォーム アクション: React を使用する最大の利点の 1 つは、状態の管理と変更 です。これは主に を使用するときに発生します。 要素。フォームは、ユーザーの対話性をより効果的に作成および処理するのに役立ちます。

フォームアクションを使用すると、データのライブミューテーションを実行するためにonSubmitやonChangeなどのイベントハンドラーは必要ありません。代わりに、actionプロパティを渡すことができます。イベントをトリガーする関数を受け取る

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

このアプローチでは、event.target.value を通じてデータを変更するために useState を適用する必要はありません。代わりに、myFunction で次のことができます。引数を介して変更されたデータを取得します。

これは、フォームの 要素から name 属性を設定する必要があることを意味します。このメソッドを使用すると、イベント ハンドラーを通じて手動で状態を変更する代わりに、React が Native React フォーム オブジェクト を通じてフォーム自体を処理できるようになります。

サーバー コンポーネント: React 19 では、クライアント アプリケーションまたは SSR サーバーのセットアップとは別の環境で、バンドルする前にコンポーネントをサーバー上でレンダリングできます。サーバー コンポーネントは SSR (サーバー サイド レンダリング) と同じではなく、React Server Components の別のサーバー環境です。
この機能により、コンポーネントが時間前に事前レンダリングできるため、コンテンツの表示が高速になり、読み込み時間が短縮されます。

メタデータ: React 19 では柔軟なメタデータが可能です。開発者は、DocumentHead コンポーネントを通じて、個々のコンポーネントの title、description、およびその他の meta タグを管理できます。これは SEO (検索エンジン最適化) の改善に役立ちます。

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}

React 19 には一連の 新しい フックがあり、新しいフックもあれば、既存のフックの改良版もあります。以下でそれらについて説明しましょう。

use() フック: use フックは、コンポーネントまたはフック内の Promise またはコンテキストの値を読み取るために直接使用できる実験的な API (現時点で既知の唯一の制限です) ）。
use フックは非常に多用途であり、非同期データのフェッチに使用できるため、useEffect の代わりに使用することもできます。これは
に役立ちます より整然とした簡潔なコード ブロックを実現します。

注意事項: これは useEffect の代替ではありません。これは、_useEffect _が制限なく実行されるという独自の制限が依然として存在するためです。

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

useActionState(): これは、状態変更の管理に役立つ新しいフックです。保留状態、エラー処理、final
の管理に役立ちます。 状態の更新。 useActionState は、フォームの送信時に呼び出される関数と _initialState の 2 つのパラメーターを受け取るという点で _useReduce と同様に機能し、次の 3 つの値を含む配列を返します。 state (状態の変更がある場合は現在の状態になります)、サーバーアクションを呼び出すためにフォームコンポーネントのプロップとして渡すことができる新しいアクション(formAction)、および _isPending _that は、_boolean _value を返します。フォームが送信されました。

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState   1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    

この例から、ボタンがクリックされるたびに、incrementFunction は state に 1 を追加します。 initialState は 0 ですが、ボタンの最初のクリックで 1 に増加し、それによって state が 1 に変更され、ボタンをクリックするたびに最後の状態に 1 が追加されます。コンポーネントの状態。

useOptimistic() フック:

これは、ページが完全に読み込まれる前でもユーザーがアクションの結果を確認できるようにする新しいフックです。サーバーがまだデータ取得モードにある場合でも、ページはユーザーに対して楽観的に表示されます。

データの取得が成功することを期待して、React は意図した結果をクライアントに表示します。データの取得が失敗した場合、React は間違ったデータが表示されないように 前の状態 の値に戻します。 。この特異なアクションは、データのシームレスかつ高速な表示に役立ち、ユーザー エクスペリエンスを向上させます。

useFormStatus():

名前が示すように、useFormStatus は フォーム または フォーム フィールド のステータスを示します。このフックはパラメータを取りませんが、確実に 4 つのオブジェクトを返します:

pending: boolean 値: true または false を返します。フォームの送信時には true を返し、フォームの送信時には false を返します。

data: フォームが正常に送信されると、次のようにフォーム フィールドからユーザーまたはオブジェクトの情報を取得できます:

(formData.get("name"))
(formData.get("address"))

method: 特に明記されていない限り、フォームのデフォルトのメソッドは GET です。 .method でフォームのメソッドを取得できます。フォームを送信するときは、文字列メソッド プロパティを POST として指定する必要があります。

action: これは、 要素のアクション プロパティに渡される関数への参照です。

useFormStatus は、常に 要素、または 内でレンダリングされるコンポーネントから呼び出す必要があります。

書ききれない更新情報が他にもたくさんあるので、たくさん読んでも飽きないでください。 React Docs Web サイトをクリックして、他の更新を確認してください。

私と一緒に学び、楽しい時間を過ごしていただければ幸いです。

私の記事を気に入っていただけましたら、ぜひフォローしてください。

ありがとう、そして皆さん、素晴らしい一週間をお過ごしください。