Tu as peut-être entendu parler de useSyncExternalStore(), un nouveau hook de React 18 permettant de s'abonner à des sources de données externes. Il est souvent utilisé en interne par les bibliothèques de gestion d'état - comme Redux - pour mettre en place un système de sélecteurs.

Mais pourquoi pas utiliser useSyncExternalStore() dans ton propre code?

Dans cet article interactif, je souhaite te présenter un problème : les hooks React qui retournent trop et déclenchant des re-renders inutiles. On va aussi voir comment useSyncExternalStore() peut être une bonne solution.

Records & Tuples, a very interesting proposal, has just reached stage 2 at TC39.

They bring deeply immutable data structures to JavaScript.

But don't overlook their equality properties, that are VERY interesting for React.

A whole category of React bugs are related to unstable object identities:

• Performance: re-renders that could be avoided
• Behavior: useless effect re-executions, infinite loops
• API surface: unability to express when a stable object identity matters

I will explain the basics of Records & Tuples, and how they can solve real world React issues.

🔗 Read More

You probably heard of React-Native-Web, allowing to render React-Native views on the web.

So, what about using React-Native in a Gatsby website?

This post is a proof-of-concept: it contains React-Native and Expo interactive components, embedded directly into this article (using MDX), of my open-source Gatsby site.

🔗 Read More

With recent production deployments from Facebook and Twitter, I think a new trend is slowly growing: atomic CSS-in-JS.

In this post, we'll see what atomic CSS is, how it relates to functional / utility-first CSS like TailwindCSS, and that big players are adopting it in their modern React codebases.

As I'm not a expert of this subject, don't expect a deep dive about the pros and cons. I just hope you get an idea about what it's about.

Note: Atomic CSS is not really related to Atomic Design.

🔗 Read More

Many blog articles talk about loading api/async data in React apps, with componentDidMount, useEffect, Redux, Apollo...

Yet, all those articles are generally optimistic, and never mention something important to consider: race conditions could happen, and your UI may end up in an inconsistent state.

🔗 Read More