Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced65 menitBahasa Indonesia

Form Registration

Mendaftarkan field dan menangani submit melalui React Hook Form tanpa state useState terpisah untuk setiap input.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan peran React Hook Form pada form React
Memasang react-hook-form di project lokal
Menghubungkan input lewat register dan submit lewat handleSubmit
Membedakan form registration dari aturan schema

ReactReact Hook FormFormsRegistration

Isi lesson

7 blok

1.
Form yang lebih besar perlu flow yang tetap terbacaBelum selesaiWajib
2.
Pasang React Hook Form terlebih dahuluBelum selesaiWajib
3.
Dua field profile terdaftar pada satu formBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
Jangan memasang library tanpa alasan yang jelasBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

Form yang lebih besar perlu flow yang tetap terbaca

Wajib

Controlled input dengan useState tetap cocok untuk satu input yang langsung mengubah UI. Namun ketika form punya banyak field, default value, validation error, dan submit state, state terpisah untuk setiap field mulai menyulitkan. React Hook Form menyediakan useForm untuk registration field, submit flow, dan form state. Field memakai register, sedangkan submit dibungkus handleSubmit.

Tiga package pada module ini memiliki peran berbeda: react-hook-form mengelola form, zod menulis aturan runtime, dan @hookform/resolvers menghubungkan schema ke form. Package tersebut dipasang serta diuji pada Local React App atau Local Next.js App. Workspace FluentStack hanya membaca struktur TSX dan tidak dapat mengetahui apakah npm install, resolver, atau request project lokalmu benar-benar berjalan.

Bagian ini memengaruhi progres lesson.

Pasang React Hook Form terlebih dahulu

Wajib

bash

npm install react-hook-form

Jalankan dari folder project yang memiliki package.json. Pasang satu package ini terlebih dahulu, cek package.json, lalu lanjutkan Zod dan resolver pada lesson berikutnya. Jangan menyalin node_modules atau menganggap package sudah tersedia hanya karena contoh muncul di FluentStack.

Bagian ini memengaruhi progres lesson.

Dua field profile terdaftar pada satu form

Wajib

tsx

"use client";

import { useForm } from "react-hook-form";

type ProfileFormValues = {
  displayName: string;
  email: string;
};

export function ProfileForm() {
  const { register, handleSubmit } = useForm<ProfileFormValues>({
    defaultValues: { displayName: "", email: "" },
  });

  function onSubmit(values: ProfileFormValues) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="displayName">Nama tampilan</label>
      <input id="displayName" {...register("displayName")} />

      <label htmlFor="email">Email</label>
      <input id="email" type="email" {...register("email")} />

      <button type="submit">Simpan profile</button>
    </form>
  );
}

Generic ProfileFormValues membuat field name serta nilai submit dapat diperiksa TypeScript. register menghubungkan input ke form dan handleSubmit membungkus handler. Contoh ini belum menentukan aturan nama atau email; Zod akan mengambil tanggung jawab itu agar registration dan validation tidak tercampur.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Register profile form fields

Lengkapi form profile agar displayName dan email terdaftar melalui React Hook Form lalu disubmit melalui handleSubmit.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa peran register pada contoh form profile?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Jangan memasang library tanpa alasan yang jelas

Pilih React Hook Form saat ia mengurangi kerumitan form, bukan hanya agar stack terlihat modern. Untuk satu input yang memengaruhi preview, useState mungkin tetap lebih sederhana. Setelah instalasi lokal, jalankan app dan cek import. FluentStack tidak dapat memeriksa package atau build di perangkatmu.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

React Hook Form mengelola registration, submit flow, dan form state.
register menghubungkan input dengan nama field pada form.
handleSubmit membungkus handler submit form.
Package perlu dipasang serta diuji pada project lokal.
Berikutnya, Zod akan menjadi satu tempat untuk menyimpan aturan data form.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Form yang lebih besar perlu flow yang tetap terbaca.

Memuat progres Review module