This Week In React #76: Redux, useSyncExternalStore, context, React-Native, Netflix, Shopify,

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

This week in React 👉 React-Redux & useSyncExternalStore 👉 Context & Perf 👉 Spacing children 👉 Netflix Lattice 👉 React Philosophies 👉 Memo 👉 Remotion 2.4 👉 Next.js SEO 👉 Redwood & Envelop 👉 React Native 0.66 👉 RN packages @ Shopify 👉 RNav v1 upgrade .. 🧵 Details 👇 https://t.co/vqK4LH2zNg

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

React-Redux v8 first alpha has been released by @acemarke Rewritten in native TypeScript More importantly adopts new useSyncExternalStore() hook. This is an important milestone for React 18, according to @dan_abramov My attempt to summarize why: https://t.co/KdEKT0ucLn https://t.co/baEKbPqZEU

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

How to destroy your app performance using React contexts, by @thoughtspile One of the best articles on React context performance traps (there are many) I read recently Explains why HOCs can still be useful to reduce rendering work with earlier bailout https://t.co/97wVZ6pltr https://t.co/qsXZgEsb6Y

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

Spacing children in React by @robinweser We often want to space list items, but without extra margin at the end. Explains what it takes to build a reliable abstraction to solve this in React We'll soon be able to use just "gap" in CSS (flex + grid) https://t.co/XeOOKyT7xd https://t.co/giFokloQz0

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

How We Build Micro Frontends With Lattice @NetflixEng presented an internal React microfrontend framework Plugins can register themselves in a host app at runtime Allows to work in isolation & deploy plugin updates without requiring host app rebuild https://t.co/GgRiHCHq9P https://t.co/Fq2lCezpYU

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

React-Native 0.66 introduced by @lunaleaps Not too far behind 0.65, prepares for iOS 15, Android 12, Apple M1 Improves release process speed/reliability: - nightly releases on npm - "commitly" releases on PRs: easier to test PRs before merge https://t.co/YQZD62Rlnq https://t.co/Q1n4zext1E

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

Reusing Code with React Native Packages at @ShopifyEng @ElviraBurchik explains work done by the Foundation team to make code-sharing across org easier: Monorepos, Yarn workspaces, tooling at root, doc site, almost automated Lerna release process... https://t.co/n0iwQdy8Mq https://t.co/TP7AkzngUv

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

Improved app performance and code quality by upgrading React Navigation @ty___ler explains the strategy to upgrade the large Opendash's app (2016) from React-Navigation v1 to v5. Gradual migration, v1+v5 working together! + TypeScript typing benefits https://t.co/cQcwSxqcbG https://t.co/QncTo5TlM1