In the realm of React development, understanding controlled and uncontrolled components is paramount. These concepts play a pivotal role in crafting robust and efficient user interfaces. Whether you're a seasoned developer or just starting with React, comprehending the difference between these two approaches can significantly enhance your proficiency in building dynamic web applications.
Controlled Components:
Controlled components in React are those where form data is handled by the React component's state. This means that React controls the form elements, such as input fields, text areas, and select dropdowns. Whenever the user interacts with these components, React state is updated accordingly, and the component re-renders with the new state values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controlled Component Example</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class ControlledComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<p>Value: {this.state.value}</p>
</div>
);
}
}
ReactDOM.render(<ControlledComponent />, document.getElementById('root'));
</script>
</body>
</html>Uncontrolled Components:
Contrary to controlled components, uncontrolled components allow form data to be handled by the DOM itself. In other words, the form elements maintain their state internally rather than being controlled by React.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uncontrolled Component Example</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class UncontrolledComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
handleSubmit = () => {
alert('Value: ' + this.inputRef.current.value);
}
render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.handleSubmit}>Submit</button>
</div>
);
}
}
ReactDOM.render(<UncontrolledComponent />, document.getElementById('root'));
</script>
</body>
</html>Conclusion:
Understanding controlled and uncontrolled components is fundamental to building sophisticated React applications. While controlled components offer precise control and validation over form data, uncontrolled components can provide a simpler solution for certain scenarios. By mastering these concepts, you'll be better equipped to design efficient and maintainable user interfaces in React.
