September 2022 Frontend Updates: React’s Render Cycle, Four Forgotten JavaScript APIs, Islands Architecture and Animated CSS Borders

This month’s updates:

• Understanding React’s Render Cycle
• Four JavaScript APIs You May Not Know About
• Islands Architecture
• Animated CSS Borders

Understanding React’s Render Cycle

The React Render Cycle is not always well understood, and there are a lot of misconceptions about when and why React re-renders. Understanding it is crucial to make good use of React.memo and memoization hooks like useCallback or useMemo. Fortunately, Josh Comeau wrote a fantastic article with a detailed explanation of the logic behind React re-renders: Why React Re-Renders.

I find it particularly interesting to know why React will render every descendant of an updated component even if it’s not depending on the parent’s state, and how to avoid it with React.memo and React.PureComponent. You’ll also learn to profile these updates with the React Devtools (a browser extension currently available for Chrome and Firefox) to know exactly what triggered a component re-render.

As a bonus, I’ll drop a link to another great article from Josh: Understanding useMemo and useCallback. If you’ve been struggling with these, check that out!

Four JavaScript APIs You May Not Know About

There are many flashy and popular new features the latest versions of JavaScript brought, and a lot has been written about them. Some others, however, haven’t been paid as much attention. That’s what Juan Diego Rodríguez (AKA Monknow) realized while taking a look at the last State of JS Survey. He wrote a great and detailed article in Smashing Magazine about four of those, with examples and use cases. I found them extremely useful:

• Page Visibility API: It lets you know when the user leaves and returns to the page, e.g., when minimizes or maximizes or switches to another tab.
• Web Share API: Enables sharing text, links, and files through the operating system’s native mechanism, which is specially useful for mobile.
• Broadcast Channel API: It allows to send and receive data from the same browsers contexts (elements like tabs, windows, iframes, or anywhere a page can be displayed).
• Internationalization API: Helps to natively solve formatting issues across different languages and regions (like dates or numbers).

Islands Architecture

Loading and processing JavaScript can hurt performance. Most of the applications still download the whole application bundle (or at best, a bundle for each page) to generate a page, even if the dynamic part is only a small part of it. Sometimes, the page is server side rendered and hydrated afterwards, which helps with SEO and makes content visible earlier for the user. But still, the whole application has to be downloaded and executed for the app to be interactive.

The Islands Architecture for web applications describes a paradigm that aims to reduce the volume of JavaScript shipped through independent “islands” of interactivity that can be delivered on top of otherwise static HTML. This approach has gained some traction lately, and there are already a few small frameworks that implement it:

• Marko: Developed and maintained by eBay, it supports Islands architecture by combining streaming rendering with automatic component level hydration. It’s also isomorphic. To understand their view, I recommend reading Michael Rawlings article: Maybe you don’t need that SPA.
• Astro: Static site builder that allows building the UI in components built in frontend frameworks like React or Svelte, and loads interactive ones individually, doing component level hydration.
• Fresh: Developed and maintained by the Deno team, it has no build step (JIT rendering), supports TypeScript out of the box and, like the preceding ones, supports component level hydration of individual components.

Animated CSS Borders

You may think borders are boring. Not if they are like the ones Coco describes! In the article he wrote on dev.to you’ll have the chance to see a lot of different border styles and funny animations with complete examples and even some CodePen Demos:

• Fantastic CSS border animations.

Check it out!

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!