🖥️

react-hook-formでフォームの値に依存して条件的レンダリング

2024/05/28に公開

Next.js

TypeScript

React Hook Form

tech

react-hook-formで、フォームの入力値に依存して表示を変えたい場合はuseWatchを使うと良い

useWatch

フォームやその親コンポーネントの完全な再レンダリングをトリガすることなく、フォームフィールドの状態に基づいてUI要素を選択的に更新することができるhook

const post = useWatch({
  control: form.control,
  name: "post",
});

return (<>{ post && <PostCard post={post} /> }</>)

useArrayFieldと合わせて使う

フォームのスキーマが次のようにネストされている時

const userSchema = z.object({
	name: z.string(),
	posts: z.array({
		title: z.string(),
		content: z.string(),
		isPublic: z.boolean(),
	})
})

const posts = useWatch({
	control: form.control,
	name: "posts",
});

const { fields, append, remove } = useFieldArray({
  control: form.control,
  name: "posts",
});

return (
	{ fields.map((field, index) => {
			// `field.isPublic` cannot trigger rendering
			{posts[index].isPublic && <PostCard key={field.id} post={field} />}
		})
	}
)

field.isPublicだとレンダリングを起こせないので注意

useWatch

useArrayFieldと合わせて使う

Discussion