Short but solid session today. A bit of system design thinking, a proper look at controlled state in React forms, and one of those JavaScript facts that sounds simple but has a lot hiding underneath it.
System Design — Start With the Requirements
Before writing a single line of code on any real project, two things need to be figured out first:
Functional Requirements — what the product does. These are your features, your MVP. What's the bare minimum that makes this thing actually usable? Strip everything down to the core and build that first.
Non-Functional Requirements — how the product performs. Things like speed, scalability, security, availability. A feature can work perfectly and still fail here — imagine a login system that works but takes 8 seconds to respond.
Getting clear on both of these before touching the keyboard saves a lot of painful refactoring later.
Controlled State in React Forms
A controlled component means React is the single source of truth for your input's value — not the DOM. Here's a clean example:
export default const Form = () => {
const [name, setName] = useState('');
const handleSubmit = (e) => {
setName(e.target.value);
};
return (
<>
<p>Name :</p>
<input value={name} onChange={handleSubmit} />
<p>Current Name : {name}</p>
</>
);
}
Every keystroke fires onChange, which calls handleSubmit, which updates state, which re-renders the component with the new value. The input always reflects exactly what's in state — nothing more, nothing less. That's what makes it controlled. You're never guessing what the DOM holds because React holds it.
Everything in JavaScript is an Object — Except When It Isn't
This is one of those statements that sounds like a fun fact until you actually need to rely on it.
Yes, almost everything in JavaScript behaves like an object — functions, arrays, dates, even null famously returns "object" from typeof (that's a decades-old bug that'll never be fixed). But there's a specific list of things that are genuinely not objects — they're called primitives:
number, bigInt, boolean, undefined, string, null, symbol
Primitives are stored and compared by value. Objects are stored and compared by reference. That distinction causes some of the most confusing bugs in JavaScript — like why "hello" === "hello" is true but {} === {} is false. Same content, completely different references.
Keep that list of seven primitives somewhere in the back of your head. It'll come up more than you'd expect.
Top comments (0)