Uncontrolled & Controlled components

Uncontrolled & Controlled components

Tags
React.js
Published
January 28, 2023
Author
Toàn Hồ

What are controlled components?

Controlled components are a type of component in React where the component's state is controlled by its props. In other words, the component's behavior and display are determined by the props passed to it, rather than by its own internal state.
 
For example, when a user types into an input field, the component's state is updated to reflect the new input. In a controlled component, the input's value is passed as a prop from the parent component, and the component does not maintain its own internal state for the input's value. Instead, it simply uses the value passed to it via props to render the input field. This means that the parent component is responsible for managing and updating the state for the input field, and the controlled component simply displays the current state.
 
Controlled components can be useful in situations where you want to have more control over the component's behavior, or where you want to share state between multiple components. Because the component's state is controlled by its props, it can be easily updated and passed down to other components, making it easy to share the state across your application.
class Input extends React.Component { render() { return <input value={this.props.value} onChange={this.props.onChange} />; } } class ControlledInput extends React.Component { constructor(props) { super(props); this.state = { value: "" }; } handleChange = event => { this.setState({ value: event.target.value }); }; render() { return ( <Input value={this.state.value} onChange={this.handleChange} /> ); } }
 
In the above example, the ControlledInput is the parent component and Input is the controlled component. The ControlledInput is managing the state and passing it down as props to the Input which is displaying the current state.
 

What are uncontrolled components?

Uncontrolled components, also known as "dumb components," are a type of component in React where the component maintains its own internal state. In other words, the component's behavior and display are determined by its own internal state, rather than by props passed to it.
An uncontrolled component is typically implemented as a simple functional component, which uses the defaultValue or defaultChecked attribute to set the initial value of an input element. This means that the component maintains its own internal state for the input's value, and any updates to the input's value are handled by the component itself.
For example, when a user types into an input field, the component's state is updated to reflect the new input, without the need to pass down props or handle change events from the parent component.
 
function UncontrolledInput() { let inputRef = useRef(null); function handleSubmit(event) { event.preventDefault(); console.log(inputRef.current.value); } return ( <form onSubmit={handleSubmit}> <input type="text" ref={inputRef} /> <button type="submit">Submit</button> </form> ); }
 
In the above example, the UncontrolledInput component is maintaining its own internal state for the input field. It uses the useRef hook to create a reference to the input element and update it's value on change. And it also handle the form's submit event to log the current value of the input field.
It's important to note that uncontrolled components can be useful in situations where you don't need to share state between multiple components, but it can be less predictable and harder to debug as compared to controlled components.

Loading Comments...