Controlled vs Uncontrolled component in React js
Introduction
React revolutionized form handling in web development by introducing a component-based approach, simplifying DOM manipulation. With options like controlled and uncontrolled components, React provides flexibility and efficiency in managing form data, empowering developers to create robust user interfaces with minimal code.
Introduce to controlled component in React
In React, a component is labeled “controlled” when React manages its state and user input. This means the component controls the form input, updating its data through event handlers like `setState()`.
When building a form, elements like textarea, select, and input are handled by the component, maintaining an internal state that updates as the user interacts. The wrapping component holds the mutable form data in its state, managing changes through the `onChange` method, which triggers `setState()`. This approach ensures a “single source of truth,” where React tracks changes internally and re-renders the component accordingly.
given an example,
In above example, we have react three useState to create three states and there are: username, email and password.
In this React component, states such as usename, email, password correspond to the ‘value’ property of input fields in a form. The ‘usename’ state manages changes to the username input value, triggered by the ‘onChange’ event. Similarly, the ‘email’ and ‘password’ state handles changes to the email and password input value. Three states are updated using ‘setUsername’ and ‘setEmail’ and ‘setPassword’ methods respectively.
By linking React state to input values, this component ensures control over form input. React serves as the “single source of truth,” making the component a controlled one.
Introduce to uncontrolled component in react
Controlled and uncontrolled components differ in their approach to state management in React. Unlike controlled components, uncontrolled components in React do not rely on state or event handlers. This means they operate independently of real-time input changes, offering a more hands-off approach to managing form elements. It was directly handle or updated by DOM.
In contrast to controlled components, uncontrolled components in React operate without relying on state or event handlers. These components don’t use React state to manage input data and are indifferent to real-time input changes. This approach provides a more straightforward and hands-off method for handling form elements.
In contrast to controlled components, uncontrolled components in React resemble traditional HTML form elements. They diverge from using React state to store input data and, instead, rely on the DOM to hold this information. Unlike controlled components, there’s no need for event handlers like `setState()` to track user changes. Uncontrolled components use refs, acting as pointers that grant access to DOM nodes, allowing retrieval of input values directly from the DOM. This approach aligns more closely with vanilla JavaScript, offering a low-level, hands-on component structure.
In the provided code snippet, two React refs have been established: usernameRef, emailRef and passwordRef.
These refs are associated with the username, email and password and fields in the input form. Utilizing React refs allows us to capture instances of the HTML elements, accessible through their `.current` property. Subsequently, by leveraging `.current`, we can retrieve the input values using the `.value` property. This method provides a means to interact with and obtain the content of input elements efficiently.
Explore a curated collection of cutting-edge frontend development tricks in our dedicated Facebook group. Join the community of skilled developers to stay updated on the latest trends and techniques. Visit us at: https://www.facebook.com/groups/147131708264515/
Thanks for reading and enjoy happy coding :)
