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

}

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