Uncontrolled Components in React

Key Concepts

• Uncontrolled Components
• Refs in React
• Handling Form Submission
• Advantages of Uncontrolled Components
• Disadvantages of Uncontrolled Components
• When to Use Uncontrolled Components
• Examples of Uncontrolled Components

Uncontrolled Components

Uncontrolled components are form elements whose values are handled by the DOM itself. Instead of using state to manage the input values, you use a ref to get form values from the DOM. This approach is less common in React but can be useful for simple forms.

Refs in React

Refs provide a way to access DOM nodes or React elements created in the render method. In the context of uncontrolled components, refs are used to directly access the input values without relying on state.

Example:

        import React, { useRef } from 'react';

        function UncontrolledForm() {
            const inputRef = useRef(null);

            const handleSubmit = (event) => {
                event.preventDefault();
                alert(Name submitted: ${inputRef.current.value});
            };

            return (
                <form onSubmit={handleSubmit}>
                    <label>
                        Name:
                        <input type="text" ref={inputRef} />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Handling Form Submission

Handling form submission in uncontrolled components involves preventing the default form submission behavior using event.preventDefault() and then accessing the form values using refs.

Example:

        function UncontrolledForm() {
            const inputRef = useRef(null);

            const handleSubmit = (event) => {
                event.preventDefault();
                alert(Name submitted: ${inputRef.current.value});
            };

            return (
                <form onSubmit={handleSubmit}>
                    <label>
                        Name:
                        <input type="text" ref={inputRef} />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Advantages of Uncontrolled Components

Uncontrolled components have several advantages, including simplicity and performance benefits. Since they do not rely on state, they can be faster and require less code. They are also easier to integrate with non-React code.

Disadvantages of Uncontrolled Components

The main disadvantage of uncontrolled components is the lack of control over the input values. This can make it difficult to implement complex validation or to ensure that the input values are always up-to-date with the component's state.

When to Use Uncontrolled Components

Uncontrolled components are best used for simple forms where you do not need to validate the input values or keep them in sync with the component's state. They are also useful when integrating with non-React code or third-party libraries.

Examples of Uncontrolled Components

Example: Simple Input Form

        import React, { useRef } from 'react';

        function SimpleInputForm() {
            const inputRef = useRef(null);

            const handleSubmit = (event) => {
                event.preventDefault();
                alert(Name submitted: ${inputRef.current.value});
            };

            return (
                <form onSubmit={handleSubmit}>
                    <label>
                        Name:
                        <input type="text" ref={inputRef} />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Example: File Upload Form

        import React, { useRef } from 'react';

        function FileUploadForm() {
            const fileInputRef = useRef(null);

            const handleSubmit = (event) => {
                event.preventDefault();
                alert(File uploaded: ${fileInputRef.current.files[0].name});
            };

            return (
                <form onSubmit={handleSubmit}>
                    <label>
                        Upload File:
                        <input type="file" ref={fileInputRef} />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Analogies

Think of uncontrolled components as a paper form where the user fills in the details directly. The form (component) does not keep track of the user's input (state) but instead relies on the user to provide the final values when the form is submitted.

Another analogy is a restaurant order form where the waiter writes down the order directly on the form. The form (component) does not update in real-time but captures the final order when the form is submitted.