This relates to stateful DOM components (form elements) and the React docs explain the difference:
- A Controlled Component is one that takes its current value through
propsand notifies changes through callbacks likeonChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component". - A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a
refto find its current value when you need it. This is a bit more like traditional HTML.
Most native React form components support both controlled and uncontrolled usage:
// 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>
In most (or all) cases you should use controlled components.
Answer from Aaron Beall on Stack OverflowVideos
This relates to stateful DOM components (form elements) and the React docs explain the difference:
- A Controlled Component is one that takes its current value through
propsand notifies changes through callbacks likeonChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component". - A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a
refto find its current value when you need it. This is a bit more like traditional HTML.
Most native React form components support both controlled and uncontrolled usage:
// 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>
In most (or all) cases you should use controlled components.
They both render form elements
Uncontrolled component and Controlled component are terms used to describe React components that render HTML form elements. Every time you create a React component that renders an HTML form element, you are creating one of those two.
Uncontrolled components and Controlled components differ in the way they access the data from the form elements (<input>, <textarea>, <select>).
Uncontrolled Components
An uncontrolled component is a component that renders form elements, where the form element's data is handled by the DOM (default DOM behavior). To access the input's DOM node and extract its value you can use a ref.
Example - Uncontrolled component:
const { useRef } from 'react';
function Example () {
const inputRef = useRef(null);
return <input type="text" defaultValue="bar" ref={inputRef} />
}
Controlled Components
A controlled component is a component that renders form elements and controls them by keeping the form data in the component's state.
In a controlled component, the form element's data is handled by the React component (not DOM) and kept in the component's state. A controlled component basically overrides the default behavior of the HTML form elements.
We create a controlled component by connecting the form element (<input>, <textarea> or <select>) to the state by setting its attribute value and the event onChange.
Example - Controlled Component:
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} />;
}
This post was orignally posted in r/react but then I realized this sub is the main one:
I am learning about controlled vs uncontrolled component now. Based on React's old documentation on Controlled Component : A react component that renders a form also controls what happened in the form is "Controlled Component". Essentailly ,if a component manages its own states are controlled component.
For uncontrolled Component, the value is not saved by React, instead it is saved by the DOM. So we used ref to get the value (like document.queryselect).
Everything makes sense for me until I saw this stack post, the top accepted answer says that a component is controlled if there is a parent component that passing value to it and notifies changes on callback. While a uncontrolled component stores its own state.
This contradicts of what the React old doc said: if a component controlled its own state, then it should be controlled component, but the stack post says otherwise.
Can anyone clarify these questions:
1: If I have a component with a input field with onChange to save the value in its state(there is no parent involved, it is a independent component), is this component controlled or uncontrolled？
2: If I have a component with a input field with onChange callback to its parent and the parent will manage the form input instead, is this controlled still?
3: If a component doesn't store value in React, but instead using the traditional DOM element's value, then it is uncontrolled component, right?
PS: modified to add missing links.