• instagram
  • twitter

SpringTree

logo
leaves
leaves
leaves

React 18, the Effect hook, and how we’re an opinionated bunch.

Will this change move developers away from React and towards Vue, Svelte or back to Angular? let me explain.

I like watching the TV show Silicon Valley. Mostly for how the show portrays programmers. It’s (mostly white) nerdy guys in pun t-shirts, typing superfast on their keyboards. And for some reason, their code always works on the first try, and they never need Google or Stack Overflow. Don’t get me wrong, it’s a big improvement from earlier attempts by Hollywood. 

One of the things the show captures perfectly is the fact that, overall, programmers are extremely opinionated people, especially when it comes to writing software. In season 3 there’s an episode called “Tabs vs spaces”. In this episode, the main character (Richard) breaks off his relationship because his girlfriend uses spaces instead of tabs to align her code.  To break up a relationship is probably an exaggeration. But it’s not as far-fetched as you might think. 

I like the competitiveness of the JavaScript software development world. Whether it’s a state management tool, project bundler, visualization library etc, there are literally hundreds of options for you to choose from. One explanation for the plethora of options is how easy it is to create something in Javascript. Another is that developers like to disagree on minute details and are prepared to go great lengths to prove someone else wrong.

image.png

That brings me to another jewel of opinionatedness that plagues  the JavaScript community right now.  

It has everything to do with the latest major release of React, version 18. For those who don’t know; React is software to build user interfaces. You used it when you visited facebook.com, instagram.com or nytimes.com. With React 18 Facebook — the owner of React —  changed how one of the key building blocks behaves in strict mode. The Effect Hook — useEffect —- adds the ability to perform side effects from a function component. It serves the same purpose as the previous life cycle methods; componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

So what changed? With this release, strict mode gets an additional behavior to ensure it's compatible with reusable state. Reusable state is state that isn’t bound to one specific component. State that ‘lives’ outside any component, and is therefore reusable to all components. So now, when strict mode is enabled, React intentionally double-invokes effects (mount -> unmount -> mount) for newly mounted components. Like other strict mode behaviors, React will only do this for development builds.

Why did Facebook make this change? If you’re interested in the reasoning, you can find it here. TL;DR Facebook’s React team is of the opinion that a component needs to be resilient to being "mounted" and "unmounted" more than once. So priming a component to mount with state is now an antipattern. But this is how I, and many others React developers, did use the Effect hook before. 

The impact of this decision cannot be overstated. There is a substantial chance that all your previous React projects require significant refactoring before you can upgrade them to version 18. This also means that libraries which you’ve been using for years, are now broken when used in (strict mode) React 18. Of course a lot of people have strong opinions about this, and you can find plenty of their opinions in Tweets, YouTube vlogs, blog posts, GitHub issues.

So what’s my personal opinion about this? I don’t really have one. React wants to head in a certain direction, and it doesn’t shy away from making hard decisions to get there. That is the hallmark of good software development, i.e. kill your darlings. When I use their product I buy into those opinions, and for better or worse, the (changes) opinions that the product will take in the future. And if you disagree with the choices a product makes, there are two options; use a different product, or build your own.

image (1).png

Did you know how many new JavaScript libraries are created every day? Here’s an app to keep track of this.

It also reminds of all the backlash Google got in 2016 for moving from Angular.js to Angular 2. Ironically, it was React that benefited from this move since a lot of disgruntled, opinionated, web developers moved from Angular.js towards React because of this. 

Will this change move developers away from React and towards Vue, Svelte or back to Angular? It’s too early to tell. It’s true that React isn’t the most easy-to-learn, accessible technology that it once was, anymore. Maybe another framework can fill this void. At SpringTree we will stick with the opinionated React framework, until there’s something better out there.