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;

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;

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>
    )
}

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>

Stay tunned for more software engineering posts!