What are controlled and uncontrolled components?

In the context of React, understanding the difference between controlled and uncontrolled components is crucial for managing form inputs effectively. Controlled components are those that derive their input values from the component's state, while uncontrolled components manage their own state internally. This distinction impacts how data flows through your application and how you handle user input.

Controlled Components

Controlled components are React components that do not maintain their own state for form inputs. Instead, they rely on React's state management to control the value of the input fields. This means that the value of the input is always driven by the state of the component. When a user types into a controlled input, an event handler updates the state, which in turn updates the input's value.

Example of a Controlled Component

import React, { useState } from 'react';

function ControlledInput() {
    const [value, setValue] = useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    return (
        

            
            
Current Value: {value}
        
    );
}

In this example, the input field's value is controlled by the `value` state. The `handleChange` function updates the state whenever the user types, ensuring that the displayed value is always in sync with the input.

Uncontrolled Components

Uncontrolled components, on the other hand, do not rely on React's state management. Instead, they use the DOM to manage their state. This means that the input values are accessed directly from the DOM elements, typically using refs. Uncontrolled components can be simpler to implement in certain cases, especially when integrating with non-React libraries or when you want to avoid unnecessary re-renders.

Example of an Uncontrolled Component

import React, { useRef } from 'react';

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('A name was submitted: ' + inputRef.current.value);
    };

    return (
        

            
            Submit
        
    );
}

In this example, the input value is accessed directly through the `inputRef` when the form is submitted. This approach allows the component to avoid managing the input's state, making it simpler in some scenarios.

Best Practices

• Use controlled components for complex forms where you need to validate or manipulate input values in real-time.
• Use uncontrolled components for simple forms or when integrating with third-party libraries that require direct DOM access.
• Always ensure that controlled components have a corresponding state update to avoid issues with input synchronization.

Common Mistakes

• Forgetting to provide a value prop for controlled components, which can lead to inputs being read-only.
• Using uncontrolled components without refs, which can make it difficult to access input values.
• Overusing uncontrolled components in a complex form, leading to challenges in managing form state and validation.

In summary, both controlled and uncontrolled components have their use cases in React. Understanding when to use each type can significantly enhance the performance and maintainability of your applications.