This month’s updates:
- Understanding React’s Render Cycle
- 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
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.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
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!
- 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).
- 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:
Check it out!