Why, Oh Why Was This Added?

#360 – June 13, 2022


How can we get a quick and dirty design system MVP (Minimally Viable Product) up and running, with minimal time investment, to prove the benefits? Learn from this article.

this week's favorite

Suppose you are checking a component called DatePicker that is built on top of a 3rd party date picker component. You are tasked to find if the component is causing problems now that you have updated another project dependency.

React takes two snapshots of the actual DOM. When a component is updated on the virtual DOM, it’s not yet updated on the DOM. The changes are compared with the second snapshot of the DOM, this one is a pre-virtual DOM update, allowing React to see where the updates were made and easily update the actual DOM. This process is much quicker than traversing the entire DOM. Here is an awesome YouTube video with more detail on this process.

So you’ve upgraded to React 18, enabled strict mode, and now all of your useEffects are getting called twice.

React 18 provides a foundation for concurrent rendering. Several new APIs were introduced, which allow users to make full use of React’s concurrent rendering capabilities. In this blog, we will cover the new useInsertionEffect hook.

Those of us who’ve been web developers more than a few years have probably written code using more than one JavaScript framework. With all the choices out there — React, Svelte, Vue, Angular, Solid — it’s all but inevitable. One of the more frustrating things we have to deal with when working across frameworks is re-creating all those low-level UI components: buttons, tabs, dropdowns, etc. What’s particularly frustrating is that we’ll typically have them defined in one framework, say React, but then need to rewrite them if we want to build something in Svelte. Or Vue. Or Solid. And so on.