forms/controlled-vs-uncontrolled

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Controlled component definition

A controlled component is a form element whose value is controlled by React state. The component's value is set by state, and changes are handled through event handlers that update that state. React becomes the single source of truth for the form data.

Uncontrolled component definition

An uncontrolled component manages its own state internally through the DOM or internal state, similar to traditional HTML form elements. React doesn't control the value directly. Instead, you use refs or DOM methods to access the current value when needed, typically on form submission.

Controlled TextInput example

import { useState } from 'react'; import { TextInput } from '@mantine/core'; function Demo() { const [value, setValue] = useState(''); return ( <TextInput label="Controlled TextInput" value={value} onChange={(event) => setValue(event.currentTarget.value)} /> ); } This example shows a controlled TextInput where the input's value is synchronized with React state, and every keystroke triggers a state update causing a re-render.

Uncontrolled TextInput example with ref

import { useRef } from 'react'; import { TextInput, Button } from '@mantine/core'; function Demo() { const inputRef = useRef<HTMLInputElement>(null); const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); if (inputRef.current) { alert(`Input value: ${inputRef.current.value}`); } }; return ( <form onSubmit={handleSubmit}> <TextInput label="Uncontrolled TextInput" ref={inputRef} /> <Button type="submit">Submit</Button> </form> ); } This example shows an uncontrolled TextInput where the input maintains its own state in the DOM and React only reads the value through a ref when explicitly requested.

Key differences between controlled and uncontrolled components

The primary difference lies in where state lives. Controlled components store state in React, while uncontrolled components store it in the DOM. Controlled components require an onChange handler to remain interactive and you explicitly define the value prop. Uncontrolled components work without any change handlers, set a defaultValue, and let the DOM handle updates.

When to use controlled components

Use controlled components when you need to validate or manipulate input values in real-time, want to enforce specific formats or constraints on user input, or require immediate feedback or dynamic UI updates based on input changes.

When to use uncontrolled components

Use uncontrolled components when you want to simplify your code and reduce boilerplate for simple forms, don't need to validate or manipulate input values until form submission, or are working with large forms where performance is a concern and want to minimize re-renders.

FormData API with uncontrolled components

All Mantine components support uncontrolled usage with the FormData API, which allows you to easily collect form values without managing state for each input.

Uncontrolled Checkbox with FormData example

import { Checkbox } from '@mantine/core'; function Demo() { return ( <form onSubmit={(event) => { event.preventDefault(); const formData = new FormData(event.currentTarget); console.log('Checkbox value:', !!formData.get('terms')); }} > <Checkbox label="Accept terms and conditions" name="terms" defaultChecked /> <button type="submit">Submit</button> </form> ); } This example shows how to use an uncontrolled Checkbox with the FormData API to collect form values without managing state.

Give your agent this brain