DEV Community

Cover image for CONTROLLED VS UNCONTROLLED INPUTS IN REACT JS
Frank Ezenwanne
Frank Ezenwanne

Posted on

1

CONTROLLED VS UNCONTROLLED INPUTS IN REACT JS

One thing about React is that the view is rendered based on state. Changing the state triggers a re-render. The state is essentially data that is dynamic based on user interactions. This topic in React is very fascinating as it can be likened to real life scenarios especially in some marriages.

CONTROLLED INPUTS 
 Before the invention of React, some HTML input elements were already used to collecting and holding dynamic data by themselves. These elements are like women that are already making their money before marriage. When they get married to their husbands i.e when the elements get into the realm of React as Jsx, the husband i.e React tries to convince them to go with a single source of truth ....Sounds weird right?

 This means every money they make is transferred up to their husband's account . If they need money for food, taking care of the home etc, the husband transfers money down to them. Every data the input elements collect is not exactly collected by them, they pass it up to the React state which then passes it down to them.

EXAMPLE

import React, {useState} from "react";

const ControlledInputComponent= (props)=>{
    const [username, setUsername] = useState('')

    const handleChange= (e) => {
       setUsername(e.target.value)
    }


  return (
     <input type type='text' value = {username} onChange = 
     {handleChange} />
   )

}
Enter fullscreen mode Exit fullscreen mode

The example above shows that the value attribute of the input which is supposed to be the direct input from the user, is actually a let down input from the state. The onChange attribute is in charge of taking every data up. So sadly, it all goes up.
Though, there might be no advantage in the real life scenario, except for men who want super-submissive wives, but in the React sense there is an advantage and of course a disadvantage.

Advantage

  • This approach is cool when you want features like automatic checks and transformation of the UI as the user progressively types. This is because the state is updated on every entry allowing for a new UI to be rendered.

Disadvantage

  • This approach although used a lot, might be draining and take a toll resulting in performance issues. Naa not sexual performance, but browser performance due to frequent re-rendering of heavy UIs

UNCONTROLLED INPUTS
The input elements here, hold on to their values.The women don't give it all up to their husbands..The elements don't pass input data up to React state. The browser, like their personal bank account, holds on to the data even after marriage to React. The elements do this with the help of a ref. Refs can be gotten from the useRef hook in React.

EXAMPLE

import { useRef } from "react";

function UncontrolledInputComponent() {
  const newRef= useRef('');

  const handleSubmit = (e) => {
    e.preventDefault(); //prevents page from refreshing
    console.log(inputRef.current.value); //here we log out the value from the current attribute of the ref object
  };

  return (
    <form onSubmit={handleSubmit}>

      <input type="text" ref={newRef} />

      <button type="submit">Go</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay