React, Part Two: The Virtual DOM and Our Rota Whiteboard

A few of you messaged after my post about React components asking about the next thing the developers kept mentioning: the "virtual DOM". I've been reading, asking questions and drawing diagrams on the back of event flyers, so here's part two of React for people who organise things.

The virtual DOM is a working copy

Quick recap first: apps are built from small reusable components that nest inside each other. The DOM is basically the page your browser is showing, and changing it directly is slow. So React keeps a lightweight copy, the virtual DOM. When something changes, React updates the copy, compares it with what's on screen and only changes the bits that are different.

It's our volunteer rota whiteboard! When one person swaps their Saturday shift, I don't wipe the whole board and rewrite forty names. I rub out one name and write another. Same board, less work, fewer mistakes. That's why React apps stay quick even when there's a lot going on.

Props and state

• Props are what a component gets handed from above, like the briefing sheet each team lead gets from me.
• State is what a component keeps track of itself, like a team lead's own tally of how many bags they've filled.

Data flows one way, downwards, and when it changes, React updates the screen automatically. Nobody has to run round telling everyone.

Lots of help out there

There's a huge ecosystem around React: tools for managing data like Redux and MobX, ready-made design kits like Material UI and Ant Design, and more tutorials than I'll ever finish. People have been really kind about beginner questions, too.

That's part two! I'm genuinely enjoying this, and I might try building a tiny component myself next month. Developers, feel free to correct my comparisons, gently please 😊