Virtual DOM
intermediateDefinition
A lightweight, in-memory sketch of what a webpage should look like. When something changes, the app draws a new sketch, compares it with the old one, and only updates the parts of the actual page that are different. This makes updates much faster than redrawing everything.
In the wild
On a long social feed, you click 'like' on a single post. Behind the scenes, the app makes a new sketch of the whole feed, notices that only that one post's like-count is different, and updates just that little number: leaving the rest of the page completely untouched.
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.
Controlled Component
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.
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.