[Go Make Things] When should you use React?

By rahmat hidayat

Wednesday, February 5, 2025

​ A few weeks ago, I wrote a bit about state-based UI vs. traditional DOM manipulation and Web Components. I recently had a student ask when you should reach for React (or Vue, or some other state-based UI tool). When are the tradeoffs of using a tool like that worth the cost? In my opinion, the value kicks in when you have… Multiple disconnected pieces of HTML that get updated when one piece of data changes, or Lots of pieces of UI inside a single component that change when data changes. Example 1. A shopping cart UI Let's say you have a shopping cart UI where the "add to cart" button and some link to go checkout are both tied to some data that tracks the items in your cart. Imagine a UI like this… <a href="/checkout">🛒 Checkout (42 Items)</a> <!-- Elsewhere on the page --> <h2>Jack Sparrow Bandana</h2> <p>Look stylish in this dapper pirate bandana. Great for all occasions!</p> <!-- This only shows up if this item is in the cart --> <div class="callout"> <p>You already have this item in your cart:</p> <ul> <li>2 Red</li> <li>1 Black</li> </ul> </div> <form> <label for="color">Pick Your Color</label> <select> <option>Black</option> <option>Red</option> <option>Blue</option> <option>Green</option> </select> <button>Add to Cart</button> </form> And that HTML is driven by a data object that looks like this… let cart = { jackSparrowBandana: { red: 2, black: 1 }, // ... }; With a state-based UI tool, any time you update the cart, the rest of the HTML automatically updates. Without it, you're manually checking a bunch of different conditions and manually updating different things. There's a lot more places to go wrong, and the code becomes harder to read and maintain. State-based UI is a good choice here. Example 2. A todo list Imagine a todo list where any given item in the list… Might be completed or not Can be edited by toggling a button May or may not have a due date And so on… Changing any one of those variables might affect multiple pieces of UI. <ul> <li> <form action="/todo/complete/14231"> <button label="Complete Todo" aria-pressed="false"> <img src="/img/incomplete-todo-icon.png"> </button> </form> Buy a new spellbook 📅 2025-10-31 </li> <li> <form action="/todo/complete/14255"> <button label="Complete Todo" aria-pressed="true"> <img src="/img/completed-todo-icon.png"> </button> </form> <del>Practice summoning a rabbit</del> </li> <li> <form action="/todo/complete/14272"> <button label="Complete Todo" aria-pressed="false"> <img src="/img/incomplete-todo-icon.png"> </button> </form> Buy a birthday cake for Esmeralda 📅 2025-02-14 <strong>⭐️ Important</strong> </li> <!-- ... --> </ul> And this is all driven by a bit of data, like this… let todos = [ { label: 'Buy a new spellbook', completed: false, due: '2025-10-31', important: false uid: 14231 }, // ... ]; Here, all of the data is in a single component. But there are so many variables that can change based on a single piece of data changing. For example, changing completed to true… Updated the [aria-pressed] attribute Updates the icon image Adds a <del> element Here, using state-based UI instead of traditional DOM manipulation agains makes the code easier to read and maintain. You describe what the UI should look like based on certain conditions, and the library makes those changes based on the data. You don't need a library (but you might want one) You can theoretically do all of this stuff with traditional DOM manipulation. State-based UI just makes it easier. If I were picking on today, I'd personally reach out for either my own library, ReefJS, or Preact (like React, but more performant and no build required). Like this? A Go Make Things membership is the best way to support my work and help me create more free content. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme