Uncontrolled Component in React.js
For user interaction with React, forms are essential since they enable data submission and input. Controlled and uncontrolled components manage form inputs in React. React.js forms pose a special difficulty since you can either use React to fully control the element by setting and updating the input value directly, or you can let the browser handle the majority of the form elements and gather data using React change events. Since React is not establishing the value, the first method is referred to as an uncontrolled component. Because React is actively updating the input, the second method is known as a controlled component.
What is an Uncontrolled Component?
Uncontrolled components are form input elements that React.js state doesn’t control. Uncontrolled components let the browser handle most form elements, whereas controlled components ask React to set and alter their values via the value prop. React forms pose a special difficulty since you can either use React to fully control the element by setting and updating the input value directly, or you can let the browser handle the majority of the form elements and gather data using React change events. Since React is not establishing the value, the first method is referred to as an uncontrolled component. Because React is actively updating the input, the second method is known as a controlled component.
It is the application’s responsibility to maintain synchronisation between the input value and the component’s state in an uncontrolled situation. Since React does not explicitly regulate the value property, user input will directly affect the rendered input.
An example of an uncontrolled component would be a basic <input type=”text” /> rendered without a value prop. The user’s input will be displayed in the field right away.
How Uncontrolled Components Work
With uncontrolled components, you usually use a “ref” to retrieve the form data straight from the DOM when it’s required, like during form submission, rather than depending on state variables and onChange handlers to continuously update the input’s value.
During runtime, you can obtain a direct reference to a class component instance or a DOM element using the React concept of references, or refs. Although handling every UI contact is generally discouraged (because it violates React’s declarative model), they are especially helpful for uncontrolled components that need to obtain the current value of the input.
Using referees that have an uncontrollable component:
Create a ref: To create a reference, you use React.UseRef() is used in functional components, and createRef() is used in class components’ constructors.
Attach the reference: Using the ref attribute, you subsequently affix this generated reference to the preferred form element. To create a new reference (this.ref), use React.createRef(). This.ref.current can be used to get the value of the attached form element after the newly generated areference has been associated to it.
Access the value: If necessary (for example, in a handleSubmit function), you can use this.refName.current.value to retrieve the value of the element.
You utilise the defaultValue prop rather than value when establishing an initial value in an uncontrolled component. This prop sets the initial value in the initial render; component state updates do not automatically reflect user changes unless properly handled.
Advantages Of Uncontrolled Component
Simplicity:For very basic forms or single inputs that simply need to get the final value upon submission and do not require instant validation or value manipulation as the user types, uncontrolled components may be easier to build. The overhead of synchronising each change in an input with the state of React is avoided.
This stage uses controlled components to dynamically set and update data. Each component will have a value prop added to it in order to set or update the form data. Submitting resets form data. After this step, you may dynamically control form data with React state and props.
Data synchronisation is unnecessary with uncontrolled components. Your app will always have the latest changes. Many circumstances need reading and writing to an input component. For this, the component’s value must be dynamic.
Disadvantages Of Uncontrolled Component
Less control: Form programming with uncontrolled components is only partially supported by React.js. You are no longer able to pre-populate, remove, or dynamically update the input value depending on other aspects of the state of your application.
Harder to implement complex features: Uncontrolled components make it harder to design complex features that require speedy input validation, conditionally disabling buttons, or enforcing input patterns as the user types because you can’t instantly access React’s state.
Potential for inconsistencies: A trigger other than user input (such as programmatically) may change the component’s state and input value, which could cause complications if not handled properly.
Because controlled components guarantee that the component state and input value are constantly in sync, providing more reliable control and predictability, they are typically advised wherever feasible. Nevertheless, uncontrolled components are still a good option for simple use cases when complete control over the value of the input is not necessary.
Code Example:
import React, { useRef } from 'react';
function UncontrolledForm() {
const nameInputRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
alert(`Submitted: ${nameInputRef.current.value}`);
nameInputRef.current.value = '';
};
return (
<form onSubmit={handleSubmit} className="p-4 max-w-md mx-auto bg-gray-100 rounded-lg shadow-md">
<div className="mb-4">
<label htmlFor="nameField" className="block text-gray-700 text-sm font-bold mb-2">
Name:
</label>
<input
type="text"
id="nameField"
ref={nameInputRef}
defaultValue="Guest"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
</div>
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Submit
</button>
</form>
);
}
export default UncontrolledForm;Output:
Name: Guest
SubmitExplanation of the Code Example:
UseRef Hook: A ref object is created using the const nameInputRef = useRef(null); line. A direct reference to the rendered DOM input element will be stored in this reference.
Ref Attribute: The <input> element’s ref={nameInputRef} attribute makes the connection between our nameInputRef and that particular DOM node. We can then access the real input element as a result.
DefaultValue Prop: defaultValue=”Guest” is used in place of value. In this way, the input field’s initial value is set. Based on modifications to a value prop, React does not re-render the input; instead, the DOM element handles its own value after the initial render.
HandleSubmit Function:
- This is important: e.preventDefault(). It disables browser reloading after form submission to facilitate Single Page Applications (SPAs).
- nameInputRef.current.value: An uncontrolled component’s central component. Upon submitting the form, we use nameInputRef.current to directly access the DOM element and then use the.value attribute to retrieve its current value.
- value of nameInputRef.current = ”;: We manually clear the input field by setting the value of the DOM element straight after submission. Due to React’s lack of state control over its value, this is required.
Conclusion
In summary, React.js uncontrolled components provide a more straightforward, browser-managed method of managing form inputs, with the DOM controlling the input values rather than React’s state. This approach works well for simple forms when receiving the final input value upon submission is adequate and little interaction is needed. Developers can directly access and modify form element values without synchronising with React state by utilising references (refs).
Trade-offs for this simplicity include less control, the challenge of integrating dynamic features like conditional rendering or real-time validation, and the possibility of inconsistencies if inputs are changed programmatically. Uncontrolled components are still a sensible option for straightforward, low-maintenance input handling scenarios, even if controlled components are recommended for complicated forms needing precise control and predictable behaviour.