7. Controlled and Uncontrolled Components Stateless and Stateful Components - florypaul/ReactJS GitHub Wiki
- Controlled components are those which controls it's custom child component and passes value through props
- Uncontrolled components are those which is a child component which depends on it's parent component for values
In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
- Stateless components does not manage any state, it's just a presentation component used to display something on the view
- Stateful components manages state using useState or this.setState functions.
Controlled Components:
Controlled components are components where the form data is controlled by React state. The value of the form input elements (such as , <textarea>, and ) is controlled by React state and passed to the component as props. Changes to the form input elements trigger event handlers that update the state, causing the component to re-render with the new value. Controlled components provide more control over the form data, making it easier to validate, manipulate, and synchronize form data across multiple components.
import React, { useState } from 'react';
const ControlledInput = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<input
type="text"
value={value}
onChange={handleChange}
/>
);
};
export default ControlledInput;
Uncontrolled Components:
Uncontrolled components are components where the form data is handled by the DOM itself, rather than by React state. The value of the form input elements is managed by the DOM, and React doesn't have direct control over it. Uncontrolled components are useful when you want to integrate with non-React libraries, work with third-party UI components, or when you need to handle form data differently. While uncontrolled components offer less control over form data, they can be simpler and more efficient in certain scenarios.
import React, { useRef } from 'react';
const UncontrolledInput = () => {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted value:', inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">Submit</button>
</form>
);
};
export default UncontrolledInput;
In summary, controlled components use React state to manage form data, providing more control and synchronization, while uncontrolled components rely on the DOM to manage form data, offering simplicity and flexibility. The choice between controlled and uncontrolled components depends on the specific requirements and preferences of the application.