Using Controlled and Uncontrolled Components in React, Quick Review
Tags: react, beginners, javascript, webdev
Published: 2022-11-21 01:34:15

## 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](https://reactjs.org/docs/hooks-reference.html#useref) 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](https://reactjs.org/docs/forms.html)
[React JS State](https://reactjs.org/docs/hooks-state.html)
[React JS Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html)
[React JS useRef Hook](https://reactjs.org/docs/hooks-reference.html#useref)
[Controlled vs Uncontrolled Forms in React](https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/)
[Rethinking UI (video)](https://www.youtube.com/watch?v=ecY3QSxZZYY)