Difference between controlled components and uncontrolled components in Reactjs

Stanley — Tue, 26 Apr 2022 01:30:49 +0000

I - Controlled components

In controlled components, the form data is handled by React components, and it is recommended to use controlled components to implement forms.

Example:

import React, { useState } from 'react'

export default function ControlComponent() {
  const [state, setState] = useState({
    value: ''
    })

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

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

    return (
    <form onSubmit={handleSubmit}>
            <label>
              Name:
              <input type="text" value={state.value} onChange={handleChange} />
            </label>
            <input type="submit" value="Submit" />
          </form>
    );

}

II- Uncontrolled components

In uncontrolled components, the form data is handled by the DOM itself.
Instead of writing an event handler for every state update, you can use useRef to get form values from the DOM.

Example:

import React, {useRef} from 'react'

export default function UnControlledComponent() {
  const inputElement = useRef(null);

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

     return (
       <form onSubmit={handleSubmit}>
         <label>
           Name:
           <input type="text" ref={inputElement} />
         </label>
         <input type="submit" value="Submit" />
       </form>
     );
}

DEV Community: Stanley

Difference between controlled components and uncontrolled components in Reactjs

I - Controlled components

II- Uncontrolled components