Why storing form data in useState() hook in React? - reactjs

Question

I am somewhat familiar with React.
In react tutorials, I have seen people creating useState hooks to store form data and also making them controlled and started doing the same but recently I saw a video of coder creating a form without using any useState for storing the data?
This has left me stumped because I am not understanding why I need to store form data in useState hook now. For what type of situations, is it useful to use state or just simply take the form value?
Please help.
I have tried searching google, reading some blogs on useState hooks, how it is used where we want to re-render a component.
Like, If I am displaying some data, and want to change it on some event, then I will use useState hook so that it will re-render the display component, with the updated state.
But I am still not understanding its use case with forms.

Answer 1

In a React form, you may want to do something on the screen as a user is typing using an onChange callback. You would need to store the user's input in state in order to properly deal with it in a useEffect. Just storing naked variables in components in React is terrible practice.
You generally only use destructured constants or derived conditional variables after hooks are called in a component in order to affect the display or to pass hook results as input to other hooks.
I would be interested to see the video or tutorial that showed you how to do a form "without state" in React because I'm not sure how that's possible - unless they were using a third-party library like formik which abstracts the useState away from you through it's own methods.
*ADDED EXAMPLE
Consider this simple comparison of two forms, one with state and one without:
https://codesandbox.io/p/sandbox/zen-sammet-imfzl5
app.tsx
import { useState } from "react";
import "./App.css";
import FormWithState from "./FormWithState";
import FormWithoutState from "./FormWithoutState";
function App() {
return (
<>
<div
style={{
border: "1px solid green",
marginBottom: "1rem",
padding: "1rem",
}}
>
<div>
This form with state notifies after 3 characters, and on submit.
</div>
<FormWithState />
</div>
<div style={{ border: "1px solid red", padding: "1rem" }}>
<div>This form without state can't alert or useEffect</div>
<FormWithoutState />
</div>
</>
);
}
export default App;
FormWithState.tsx
import { useEffect, useState } from "react";
import "./App.css";
export default function FormWithState() {
const [message, setMessage] = useState("");
const onChange = (e: any) => {
setMessage(e.target.value);
};
const onSubmit = (e: any) => {
e.preventDefault();
alert(`You sent the message: ${message}`);
};
useEffect(() => {
if (message.length >= 3) {
alert("This message is longer than 3 characters. Wow!");
}
}, [message]);
return (
<div className="App">
<form onSubmit={onSubmit}>
<input type="text" name="name" onChange={onChange} />
<button type="submit">Submit</button>
</form>
</div>
);
}
FormWithoutState.tsx
import { useEffect } from "react";
import "./App.css";
export default function FormWithState() {
let message = "";
const onChange = (e: any) => {
message = e.target.value;
};
const onSubmit = (e: any) => {
e.preventDefault();
alert(`You sent the message: ${message}`);
};
useEffect(() => {
if (message.length > 3) {
alert("This message is longer than 3 characters. Wow!");
}
}, [message]);
return (
<div className="App">
<form onSubmit={onSubmit}>
<input type="text" name="name" onChange={onChange} />
<button type="submit">Submit</button>
</form>
</div>
);
}
Notice how the green form can alert and useEffect as the user types / submits - while the red form cannot.
Both Forms:
This works (with state):
This does not work (without state):
I hope that helps a bit!