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
8:49 PM · Jan 18, 2023
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
8:49 PM · Jan 18, 2023
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
8:49 PM · Jan 18, 2023
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
8:49 PM · Jan 18, 2023
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
8:49 PM · Jan 18, 2023
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
8:49 PM · Jan 18, 2023
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
8:49 PM · Jan 18, 2023
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
8:49 PM · Jan 18, 2023