Using Controlled and Uncontrolled Components in React, Quick Review

Introduction

Today I will be talking about uncontrolled vs controlled components in React from the perspective of a student.

React is a Javascript library that allows web developers to modularize their web applications into separate and reusable components. This also comes with very convenient features that allow you to control how data is handled in forms.

One of these features is Controlled Components.

Controlled Components

Controlled components are forms that are handled entirely by a React component and a hook called useState. useState is a hook that automatically refreshes the application whenever a change is made to its state variable (prop). Form elements become controlled elements once the value is set to a prop.

In the case of controlled forms, it will track every change done to the form (every input down to the letter).

This is useful because the application can keep track of what the user is inputting before they hit submit.

A simple way to set this up would be to have a basic form like so:

import React, { useState } from "react";

function Form() {
    const [name, setName] = useState("");

    console.log(name);

    return (
        <form>
            <input type="text" value={name} onChange=
                {(e) => setName(e.target.value)} />
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

When typing into the field, you'll see that the state variable name is updating in real time with its current value. The onChange event uses the setName function to change the value of name to the current target value using e.target.value.

This is useful in cases where you need features such as:

• Immediate feedback to input validation
• Disabling a submission before the field has valid input
• Forcing specific characters (numbers only, no special characters, etc)

Uncontrolled Components

Uncontrolled components are more traditional forms that are controlled by the DOM instead of an individual component. Uncontrolled components use the useRef attribute. You can use useRef as a way to access values from the DOM.

import React, { useRef } from "react";

function Form() {

    const ref = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(ref.current.value)
    };

    return (
        <form>
            <input type="text" ref={ref} />
            <button type="submit" onClick= 
               {handleSubmit}>Submit</button>
        </form>
    );
}

export default Form;

We first bring in the useRef hook then we use a ref attribute in our JSX to give the current value to our ref variable. This gives us access to the submitted form information.

Although useRef is used here as a way to get information directly from the DOM, it has more uses such as holding data that will persist through application re-renders. You can check out React JS useRef Hook to see more details about the useRef hook.

You won't use uncontrollable forms very often but here are a few examples of when you may want to use it:

• Media playback
• Maintaining focus
• Selecting text
• Integrating 3rd party DOM libraries
• Imperative animations
• etc

Conclusion

Both types of forms have their merit but for most intents and purposes, controlled components are preferred.

Notes

Please let me know in the comments if I've made any errors. Still new to JS and React but would like to know your thoughts :)

Credits and Additional Resources

React JS Forms
React JS State
React JS Refs and the DOM
React JS useRef Hook
Controlled vs Uncontrolled Forms in React
Rethinking UI (video)