この記事では、フォームを扱うときに開発者が直面する一般的な闘いについて説明し、React 19 がようやく、フォームの処理をよりクリーンで、より宣言的で、間違いの傾向が少なくなるようにするいくつかの長く待ち受けたツールを導入する方法について説明します。 複雑なフォームシステムを構築し、SDGのAIツールを統合するまで、過去6年間で、私は認めたいよりも多くのフォームコードを書き、デバッグし、再構成しました。 もしあなたが React でフォームを構築または維持したことがあるなら、おそらくその気持ちを共有しているでしょう。 この記事では、フォームを扱うときに開発者が直面する共通の闘いを通してあなたを歩きます - そしてどのように ようやく、フォームの処理をよりクリーンで、より宣言的で、間違いの傾向が少なくなるほど長く待望したツールを導入します。 React 19 対応形態における共通の課題 すべての React 開発者が少なくとも一度は直面した痛みの点から始めましょう。 ボイラープレートコード Everywhere React でのフォーム状態の管理は、通常、以下のようになります。 const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [error, setError] = useState(null);

function handleSubmit(event) {
  event.preventDefault();
}
 ✅それはシンプルで、小さな形に完璧に適しています。 しかし、あなたがスケールアップするとすぐに、あなたは繰り返しの状態のハック、手動のリセット、そして無限に溺れるようになります。 呼びかけ トップ > 予防 > ( ) トップ > 予防 > ( ) それぞれのキーショックは再生を引き起こし、エラーや待機状態を管理するには、より多くの状態変数が必要です。 2. Props Drilling あなたのフォームが単なるコンポーネントではなく、組み込まれたコンポーネントの階層である場合、あなたはそれぞれのレベルでプロプスを渡すようになります。 <Form>
  <Field error={error} value={name} onChange={setName}>
    <Input />
  </Field>
</Form>
 State, errors, loading flags — all drilled down through multiple layers. これはコードを膨らませるだけでなく、メンテナンスとリファクタリングを苦痛にする。 3. 楽観的な更新は難しい 楽観的な更新プログラムを手動で実装してみたことはありますか? それは、ユーザアクションの直後にUIで「成功」の変更を表示するとき - サーバーが実際にそれを確認する前に。 それは簡単なように聞こえるが、リクエストが失敗したときにロールバックロジックを管理することは、本当の頭痛になるかもしれない。 あなたは何処に一時的な楽観的な状態を保存しますか? どのように合併し、それから戻しますか? React 19 は、これをよりクリーンに導入します。 useActionState: Form Submissions を処理する新しい方法 React 19 で最もエキサイティングな追加の一つは ==*useActionState *==hook です。 async form submission、state management、loading indication を 1 か所に組み合わせることによって形式の論理を簡素化します。 const [state, actionFunction, isPending] = useActionState(fn, initialState);
 こちらは何が起きているのか: 
 
 
 
 
 
  — your async function that handles the form submission fn 
 
  — the initial value of your form state initialState 
 
  — a built-in flag showing whether a submission is in progress isPending FN 初期国 ISPENDING どのように機能する async 関数は、 automatically receives two arguments: 自動的に2つの論点を受け取ります。 使い方 使い方 const action = async (previousState, formData) => {
  const message = formData.get('message');

  try {
    await sendMessage(message);
    return { success: true, error: null };
  } catch (error) {
    return { success: false, error };
  }
};
 You then hook it into your form like this: const [state, actionFunction, isPending] = useActionState(action, {
  success: false,
  error: null,
});

return <form action={actionFunction}> ... </form>;
 フォームを送信すると、自動的に反応します: 
 
 
 
 あなたのAsync Actionを呼び出す 更新 ***state ***with the returned result isPendingを通じて提出プロセスを追跡 アクション アクション ISPENDING ISPENDING もはやマニュアル or reset logic — React takes care of all that. ️ 予防、予防、 予防、予防、 予防、予防、 A note about startTransition If you decide to trigger the form action manually (e.g., outside of the form’s action prop), wrap it with  : startTransition スタート移行 const handleSubmit = async (formData) => {
  await doSomething();

  startTransition(() => {
    actionFunction(formData);
  });
};
 そうでないと、React はアシンクアップデートが移行の外で発生したことを警告します。 きちんと更新しない。 ISPENDING なぜあなたはActionStateを使用するのが好きになるのか 
 
 
 
 
 複数の用途を必要としません。 自動待機状態(isPending) Event.preventDefault() は必要ありません。 オートフォルム 順調な提出後にリセット ISPENDING ISPENDING トップ > 予防 形式の論理は再び宣言的に感じる - 単にケーブルではなく行動を記述するだけです。 useFormStatus: no more props drilling useFormStatus: no more props drilling トップページ もう一つの強力な新しいハック - — 木の形でプロプの掘削の問題を解決します。 使用形態 import { useFormStatus } from 'react-dom';

const { pending, data, method, action } = useFormStatus();
 You can call this hook. あなたはこのホークと呼ぶことができます。 , そして、自動的に親フォームの状態に接続します。 inside any child component of a form Example function SubmitButton() {
  const { pending, data } = useFormStatus();
  const message = data ? data.get('message') : '';

  return (
    <button type="submit" disabled={pending}>
      {pending ? `Sending ${message}...` : 'Send'}
    </button>
  );
}

function MessageForm() {
  return (
    <form action={submitMessage}>
      <SubmitButton />
    </form>
  );
}
 
 
 SubmitButton は、プロプションが転送されずに、フォームのデータと待機状態にアクセスできます。 SubmitButton は、プロプションが転送されずに、フォームのデータと待機状態にアクセスできます。 Submitボタン Gotchas to remember GOTCHA 覚えておく 
 
 
 
 ☑ フォームがレンダリングされている同じコンポーネントで呼び出すと機能しません. It must be inside a child component. ☑ onSubmit マネージャーを使用するフォームには反応しません - これは ***action ***prop を有するフォームでなければなりません。 ⚠️現在のところ、formMethodのボタンや入力(例えば、formMethod=“get”)の内側のオーバーラードは、予想通りに動作しません - フォームはまだメインメソッドを使用しています。 オナニー 形式 「GET」=「GET」 何故使われているかというと 樹木の形でプロップ掘削を排除する ☑ 子どものコンポーネント内の文脈的意思決定を可能にする コンポーネントを切り離し、クリーンにします。 useOptimistic: Declarative Optimistic UI(宣言楽観的なUI) 最後に、私のお気に入りの添加物の1つについて話しましょう。 . useOptimistic 利用楽観 それは楽観的なUI更新のための内蔵サポートをもたらし、ユーザーのインタラクションが即座かつスムーズに感じるようにします。 問題 「お気に入りに追加」をクリックすると、すぐに更新を表示したい - サーバーの応答の前に。 伝統的に、ローカル ステータス、ロールバック ロジック、およびアシンク リクエストの間でジョギングします。 解決策 同 , it becomes declarative and minimal: それは宣言的で最小限のものになります。 useOptimistic 利用楽観 利用楽観 const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage) => [newMessage, ...state]
);

const formAction = async (formData) => {
  addOptimisticMessage(formData.get('message'));
  try {
    await sendMessage(formData);
  } catch {
    console.error('Failed to send message');
  }
};
 サーバーリクエストが失敗した場合、React は自動的に以前の状態に戻ります。 成功すれば、楽観的な変化は残る。 関連記事:変身しないこと 使用に移行する更新機能Optimistic は、 : pure この間違え: (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
}
 正解: (prev, newTodo) => [...prev, newTodo];
 
 
 常に新しい状態のオブジェクトまたはマレーを返します! 常に新しい状態のオブジェクトまたはマレーを返します! StartTransition を使用する フォームの外部で楽観的な更新を起動する場合 , wrap them in : アクション スタート移行 アクション スタート移行 startTransition(() => {
  addOptimisticMessage(formData.get('message'));
  sendMessage(formData);
});
 そうでなければ、React は、過渡期の外に楽観的な更新が発生したことを警告します。 利用の利点Optimistic 
 
 
 
 
 即時フィードバック 自動ロールバックエラー クリーン・コンポーネント・ロジック 充電国が少なくなる それはユーザーが感じる UX 改善の種類です - たとえ彼らがあなたのアプリが突然急に感じる理由を知らないとしても。 結論 React 19 は、フォーム処理を大幅に簡素化し、新たなシンタクスではなく、実際の開発者体験の改善を意味します。 以下は、何を使用するか、そしていつ使用するかについての迅速なレビューです: 
 
 
 
 
 
 
 
 
 
 Goal 
 React 19 Tool 
 
 
 
 Access form submission result 
 useActionState 
 
 
 
 Track pending submission 
  from   or   from  isPending useActionState pending useFormStatus 
 
 
 
 Access form state deep in children 
 useFormStatus 
 
 
 
 Handle optimistic UI updates 
 useOptimistic Access form submission result useActionState 使い方 Track pending submission  from   or   from  isPending useActionState pending useFormStatus ISPENDING 使い方 待機 使用形態 Access form state deep in children useFormStatus 使用形態 Handle optimistic UI updates useOptimistic 利用楽観 これらのハックは、Reactのフォームを宣言的で、コンポーシング可能で、より少なからず騒がしいものにする。 If you’ve ever felt that working with forms in React meant writing boilerplate just to keep things in sync — React 19 is the release you’ve been waiting for. ✨ React 19 で Web エクスペリエンスの未来を形作るチームに加わる! AT , we are building smarter, faster, and more dynamic interfaces - and we are hiring. 今日、私たちと一緒に次の機会を探索してください。 ソーシャルディスカバリーグループ 
 
 ソーシャル・ディスカバリー・グループ(Social Discovery Group)のシニア・フロントエンド・デベロッパー(Senior Frontend Developer)のセルゲイ・レヴコヴィッチ(Sergey Levkovich)氏。 ソーシャル・ディスカバリー・グループ(Social Discovery Group)のシニア・フロントエンド・デベロッパー(Senior Frontend Developer)のセルゲイ・レヴコヴィッチ(Sergey Levkovich)氏。 書かれた by Senior Frontend Developer at . セルゲイ・レヴコヴィッチ ソーシャルディスカバリーグループ セルゲイ・レヴコヴィッチ セルゲイ・レヴコヴィッチ ソーシャルディスカバリーグループ ソーシャルディスカバリーグループ

This story contains new, firsthand information uncovered by the writer.

See how we create Social Life 3.0 👉

Social Discovery Group Earns the Great Place To Work® Certification in the USA!

Swipe Away Loneliness: 2024 Dating Trends Forecast

このオーディオは、ストーリーの元の言語で制作されています。

React 19: フォームで作業するための新しいツール

About Author

コメント

ラベル

この記事は

Related Stories

Telegram: クリプト島と本土を結ぶ橋

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Telegram: クリプト島と本土を結ぶ橋

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps