Esto se relaciona con los componentes DOM con estado (elementos de formulario) y los documentos de React explican la diferencia:

• Un componente controlado es aquel que toma su valor actual a través de props y notifica los cambios a través de devoluciones de llamada como onChange . Un componente principal lo "controla" manejando la devolución de llamada y administrando su propio estado y pasando los nuevos valores como accesorios al componente controlado. También podría llamar a esto un "componente tonto".
• Un componente no controlado es aquel que almacena su propio estado internamente, y consulta el DOM usando una ref para encontrar su valor actual cuando lo necesita. Esto es un poco más como HTML tradicional.

La mayoría de los componentes nativos del formulario React admiten el uso controlado y no controlado:

 // Controlled: <input type="text" value={value} onChange={handleChange} /> // Uncontrolled: <input type="text" defaultValue="foo" ref={inputRef} /> // Use `inputRef.current.value` to read the current value of <input>

En la mayoría (o en todos) los casos , debe usar componentes controlados .

Ambos representan elementos de forma

Componente no controlado y componente controlado son términos que se utilizan para describir los componentes de React que representan elementos de formulario HTML . Cada vez que crea un componente React que representa un elemento de formulario HTML, está creando uno de esos dos.

Los componentes no controlados y los componentes controlados difieren en la forma en que acceden a los datos de los elementos del formulario ( <input> , <textarea> , <select> ).

Componentes no controlados

Un componente no controlado es un componente que representa elementos de formulario, donde los datos del elemento de formulario son manejados por el DOM (comportamiento DOM predeterminado). Para acceder al nodo DOM de la entrada y extraer su valor, puede usar un ref .

Ejemplo - Componente no controlado:

 const { useRef } from 'react'; function Example () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} /> }

Componentes controlados

Un componente controlado es un componente que representa elementos de formulario y los controla manteniendo los datos del formulario en el estado del componente.

En un componente controlado , los datos del elemento de formulario son manejados por el componente React (no DOM) y se mantienen en el estado del componente . Un componente controlado básicamente anula el comportamiento predeterminado de los elementos del formulario HTML.

Creamos un componente controlado conectando el elemento de formulario ( <input> , <textarea> o <select> ) al estado estableciendo su value de atributo y el evento onChange .

Ejemplo - Componente controlado:

 const { useState } from 'react'; function Controlled () { const [email, setEmail] = useState(); const handleInput = (e) => setEmail(e.target.value); return <input type="text" value={email} onChange={handleInput} />; }

El componente controlado es el componente que obtiene el valor modificado de la función de devolución de llamada y el componente no controlado es el componente que tiene el del DOM. Por ejemplo, cuando se cambia el valor de entrada, podemos usar la función onChange en el componente controlado y también podemos obtener el valor usando DOM como ref.