Before going into the controlled or uncontrolled components,let's go one step back and understand the Components in react

What is Component In React

A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components

So in website there will be number of components together forms the website

Here we need to consider one point components are similar like functions which will takes the parameters that is nothing but PROPS so props can be anything like primitives or functions so what i meant to say is we can pass functions or numbers or strings or objects as PROPS to the components

and Each and Every Components in React basically return a piece of JSX code that tells what should be rendered on the screen.

to understand uncontrolled components we must know the useRef hook

let's consider the example of getting input element value

const takeTheInput=(e)=> console.log(e.target.value)

<input type="text" onChange={takeTheInput}/>

this is how we do, to print the input filed value But problem is, doing in this way is not recommendable becuase here we are manipulating the DOM directly (Impertive style of code) but REACT is declarative so we should follow declarative style to get the Value of input filed, so here hook useRef will help us to access the elemets and their values declartively.

one more point to understand in useRef hook is it wont re-renders the component even though it's value changes.

import {useRef} from 'react'
const userInput=useRef(null)
const submitForm=()=>console.log(userInput) // o/p will be usere entered text
<form onSubmit={submitForm}>
<input type="text"  ref={textInput}/>
<input type="submit"/>
</form>

So discussed things are prerequisites to learn our main agenda(controlled and uncontrolled components)

Controlled component :

The controlled component is a way that you can handle the form input value using the state and to change the input value there is only one way to change it is using setState or useState if you are using React Hooks and you can change this state using one of the events like onChange and when the user starts writing any character setState or useState will be called and update the state of this input then it will add the new value inside the input.(component is under the control of Components state).

import React, { useState } from "react";
export default function App() {
  const [inputValue, setInputValue] = useState("");
  const handleInputChange = (e) => {
    setInputValue(e.target.value)
  }
  const handleSubmitButton = () => {
    alert(inputValue);
  };
  return (
    <div className="App">
      <input value={inputValue} onChange={handleInputChange} />
      <input type="submit" value="submit" onClick={handleSubmitButton} />
    </div>
  );
}

in the above example, we use the controlled component to handle the form input value using React Hooks and every time you will type a new character, handleInputChange is called and it takes in the new value of the input and sets it in the state then you can use this value and print it inside alert when submitting use handleSubmitButton.

one more thing is setInputValue we can pass this function to any of its childs as Props and we can controll this component from that child

Uncontrolled Component:

The uncontrolled component is like traditional HTML form inputs that you will not be able to handle the value by yourself but the DOM will take care of handling the value of the input and save it then you can get this value using React Ref and for example, print it inside alert when submitting or play with this value as you want.

here we dont have any state to pass to other child components so we can't controll this component from any of its child's hence it is called uncontrolled component

check discussed useRef Example once agian. so that's the difference between controlled and uncontrolled components