DEV Community

Pedro Uzcátegui
Pedro Uzcátegui

Posted on

React.js Controlled vs Uncontrolled

Controlled Components

These components are controlled by react state. For example, if we have a form, and we have the model of that form represented by a react state, and the inputs are linked as two way binding (menaning that changing the input value will change the react state, and that input value is going to be the value of that state) then we have a controlled component.

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input.

import { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  function handleSubmit() {
    alert(`Name: ${name}`);
  }

  return (
    <div className="App">
      <h3>Controlled Component</h3>
      <form onSubmit={handleSubmit}>
        <label>Name:</label>
        <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Uncontrolled Components

These components, by definition, are not controlled by the react state, but by the DOM (Document Object Model)

These components uses ref to access their own state.

Usually, uncontrolled components are dependant on the browser, like Inputs of every type, Window Resizing, HTML Canvas Elements, and so on.

import React, { useRef } from 'react';

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

  function handleSubmit() {
    alert(`Name: ${inputRef.current.value}`);
  }

  return (
    <div className="App">
      <h3>Uncontrolled Component</h3>
      <form onSubmit={handleSubmit}>
        <label>Name :</label>
        <input type="text" name="name" ref={inputRef} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

For example, In React, an is always an uncontrolled component because its value can only be set by a user, and not programmatically.

Anything that we control with the DOM that can't be done with a React State, we do with Refs.

React Refs

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. - https://beta.reactjs.org/learn/referencing-values-with-refs

The common way to use refs in functional components is to useRef() hook.

const LoginPage = () => {
    const passwordRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`This is your password ${passwordRef.current.value}`)

    }

    return(
        <form onSubmit={handleSubmit}>
            <input type="email" name="email"/>
            <input type="password" name="password" ref={passwordRef}/>
        </form>
    )
}
Enter fullscreen mode Exit fullscreen mode

Is recommended to initiallize refs to null, since is the DOM is not mounted when loading the page and will not know about the input value beforehand.

We also can forward refs, is not very used in react, but we can use React.forwardRef() to create components that forwards ref to child components.

const Button = React.forwardRef((props, ref)=>(
    <button ref={ref} className="FancyButton">
        {props.children}
    </button>
));

// Now we can pass forward refs to this component.
const buttonRef = useRef(null);
<Button ref={ref}>Click me!</Button>
Enter fullscreen mode Exit fullscreen mode

Stay tunned for more software engineering posts!

Top comments (3)

Collapse
 
moazamdev profile image
Moazam Ali

Are controlled and uncontrolled components can be used in classes?

Collapse
 
pedrouzcategui profile image
Pedro Uzcátegui

Hi @moazamdev! Yes! You can still pass refs or use the class state to create uncontrolled or controlled components respectively.

This example uses hooks, but is still doable with classes.

Collapse
 
moazamdev profile image
Moazam Ali

Ok @pedrouzcategui, thanks for this great post!