Aller au contenu principal

· 5 minutes de lecture
Sébastien Lorber
Editeur - Mainteneur de Docusaurus

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.

social card

· Une minute de lecture
Sébastien Lorber
Editeur - Mainteneur de Docusaurus
🇫🇷 Non traduit :/
Malheureusement, cette page n'a pas encore été traduite en français. Reviens un peu plus tard!

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.

hero

🔗 Read More

· Une minute de lecture
Sébastien Lorber
Editeur - Mainteneur de Docusaurus
🇫🇷 Non traduit :/
Malheureusement, cette page n'a pas encore été traduite en français. Reviens un peu plus tard!

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.

hero

🔗 Read More

· Une minute de lecture
Sébastien Lorber
Editeur - Mainteneur de Docusaurus
🇫🇷 Non traduit :/
Malheureusement, cette page n'a pas encore été traduite en français. Reviens un peu plus tard!

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.

hero

🔗 Read More

· Une minute de lecture
Sébastien Lorber
Editeur - Mainteneur de Docusaurus
🇫🇷 Non traduit :/
Malheureusement, cette page n'a pas encore été traduite en français. Reviens un peu plus tard!

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.

hero

🔗 Read More