Controlled Component
intermediateDefinition
A form field, a text box, a checkbox, a dropdown, whose value is being watched and managed by the rest of the app, rather than just floating freely on the page. The app always knows exactly what's typed in, character by character.
In the wild
On a sign-up form, the email field is a controlled component. The moment you type a letter, the app sees it and can react: for example, instantly showing a green check if the email looks valid, or a red warning if it doesn't.
More from React & Frontend
Bundle
When a website is ready to be put online, all of its hundreds of small code files are squeezed and stitched together into one (or a few) compact files. That packaged-up result is the bundle. Smaller bundles mean faster page loads.
Component
A reusable building block of a website or app. Think of a 'Like' button or a product card: once it's built, you can drop it into any page and it works the same way every time. Most modern apps are made by snapping these blocks together.
Context
A way to share information across an entire app without passing it through every single building block by hand. It's like setting one master switch, for the theme, the logged-in user, the chosen language, that any part of the app can read whenever it needs to.
CSR (Client-Side Rendering)
A way of building websites where the browser receives a mostly empty page plus a chunk of code, then assembles the visible content right there on your device. The first load can feel slow because nothing is visible until the code finishes running, but after that, moving between pages is snappy.
Hook
A small helper that lets a building block remember things, react to changes, or do work in the background. There are different hooks for different jobs: one for remembering values, one for running setup code, one for tapping into shared settings.
Hydration
The moment a static page wakes up and becomes interactive. The server first sends the browser a fully drawn page so you have something to look at right away. Then a little code arrives and 'hydrates' the page, wiring up all the buttons and forms so they actually respond to clicks.