React - formulieren

React

useRef

Probleem

Download todo-list-exercise_solution.zip
- npm install
- npm run dev
- Wat is er niet optimaal?
  - Tip: React rendert een component opnieuw wanneer state verandert. We willen onnodige renders zoveel mogelijk vermijden!

useRef

☝️ Wat is er niet optimaal?
- Bij elke aanpassing (change) in het tekstveld, wordt de component opnieuw gerenderd.
  Maar: als we niet op Submit klikken, wijzigt er niets.
- Oplossing? → useRef

useRef

useRef is a React Hook that lets you reference a value that’s not needed for rendering.

Input-element opslaan in een variabele, want het moet/mag niet opnieuw gerenderd worden
Andere voorbeelden? Documentatie

useRef

export default function App() {
  const taskDescriptionInputRef = useRef<HTMLInputElement>(null);
  // ...

  function handleSubmit() {
    if (taskDescriptionInputRef.current && taskDescriptionInputRef.current.value) {
      setTasks([...tasks, { id: crypto.randomUUID(), description: taskDescriptionInputRef.current.value, isCompleted: false }]);
      taskDescriptionInputRef.current.value = "";
    }
  }
  
  // ...
  
  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input type="text" placeholder="Add your task" ref={taskDescriptionInputRef} />
        <div>
          <button onClick={handleSubmit}>Submit</button>
        </div>
      </div>     
      {showTasks()}
    </div>
  );
}

useRef

Maximale lengte valideren
→ HTML: maxlength-attribuut
- ⚠️ geen custom foutboodschap mogelijk
- ⚠️ te lange tekst wordt afgekapt
- Oplossing?
  → state: taskDescriptionLengthError

React Hook Form

⚠️ Opgepast: React → JS(X)-notatie

~~minlength~~ → minLength
~~maxlength~~ → maxLength
...

Formulieren valideren

Welke formuliervalidaties kunnen we bedenken?
Denk aan onderstaande velden:
- Postcode
- Paswoord
- Telefoonnummer
- Ondernemingsnummer
- ...

Formulieren valideren

☝️ Welke formuliervalidaties kunnen we bedenken?
- Lengte
- Formaat / patroon (reguliere expressie)
- Vereist / optioneel
- Bereik (tussen x en y)
- Cross-field (bv. overeenkomende paswoorden)
- ...

Formulieren valideren

Code wordt snel onoverzichtelijk (state, refs ...)
bij complexe validaties
Oplossing? → React Hook Form ✅

React Hook Form reduces the amount of code you need to write while removing unnecessary re-renders.

React

TanStack Form

Headless UI for building performant and type-safe forms

Waarom TanStack Form? 🤔

TanStack ecosysteem: Query, Router ...
TypeScript support
Gelijkaardige syntax als React Hook Form

Oefening

Oefening:

Download tanstack-boilerplate.zip
Uitpakken

npm i @tanstack/react-form

Maak routes/index.tsx aan

Oefening

Validaties:

Voornaam:
vereist, max. 50 karakters
Familienaam:
vereist, max. 50 karakters
Leeftijd:
tussen 0 en 99

Oefening

Stap 1: maak een interface die het formulier beschrijft