This week in React
π Scheduling Profiler
π Next.js 11.1
π Split components
π "context flag" anti-pattern virus
π Dynamic forms with visitor
π TS Unions with Destructuring
π React Native 0.65 + plans
π React Navigation 6.0
π Portals + document.body
...
𧡠Details π
React has a new Scheduling Profiler, presented by @brian_d_vaughn
This should help understand better what React is working on, in a concurrent world with features such as Suspense, transitions, offscreen, lazy...
Pro-active & also hint suggestions
github.com/reactwg/react-β¦
Next.js 11.1 released by @vercel team
nextjs.org/blog/next-11-1
They keep improving DX and perf.
In particular, swc integration and transforms rewritten in Rust.
Experimental ES modules support (turned on by default in next Next π)
Next Image improvements
Guideline from the 70's on how to split your React components
@JooForja takes 4 rules from an old evergreen paper, and applies them to React component decomposition.
Rules are a bit formal/abstract but make sense. I follow them intuitively somehow.
joaoforja.com/blog/guidelineβ¦
Using destructuring on TypeScript union types can be frustrating
TS doesn't narrow types in if/else/switch
@kyleshevlin highlights the problem here:
kyleshevlin.com/discriminated-β¦
Note: v4.4 improves type narrowing a bit, but not yet for destructuring πΏ:
github.com/microsoft/Typeβ¦
How One Conditional Can Entangle Your React App
Interesting story by @jasonleehodges:
betterprogramming.pub/how-one-conditβ¦
The "context flag" React anti-pattern was introduced in a PR
But devs tend to copy what they see: the anti-pattern ends up spreading in the codebase, like a virusπ
Generating User-configured UI Using The Visitor Pattern
Inspired by Babel, @arahansen explains how he uses the visitor pattern for rendering dynamic React forms
Field implementations can be plugged from the outside to suit multiple use-cases
arahansen.com/react-design-pβ¦
React-Native 0.65 introduced by @lunaleaps
- Hermes update, Hades GC, Intl on Android...
- Accessibility improvements
- Version bumps
Some qualified it as a "small release", missing Fabric progress
Very excited to see Hermes slowly becoming ubiquitous
reactnative.dev/blog/2021/08/1β¦
The @reactnative team plans to communicate more
Starting with H2 2021 plans:
reactnative.dev/blog/2021/08/1β¦
- Fabric public rollout
- Improve release process, issue triaging
- Concurrent rendering, lazy offscreen rendering
- Pushing cross-platform: Messenger Desktop feedback, VR
React-Navigation v6, released by @satya164
reactnavigation.org/blog/2021/08/1β¦
Polish over v5 rewrite
- defaults to native navigation
- better TS typing
- Elements UI lib to build your own navigator
- new Group comp, for organization
- Flipper debugging plugin
Mistakes I made while maintaining an open-source React Native library for five years
@mazzarolomatteo shared thoughts and errors while maintaining React-Native-Modal
This will resonate with anyone that maintains open-source projects for a long time π€ͺ
mmazzarolo.com/blog/2021-08-2β¦
Donβt attach tooltips to document.body
atfzl.com/don-t-attach-tβ¦
Interesting advice + perf analysis
This should apply to React apps using PopperJS, Tether and other portals
Web Assembly should be a default binary target
@taybenlor shares an interesting vision where any software can run anywhere
We could have a lot of freedom thanks to WebAssembly portability.
dev.to/taybenlor/web-β¦
We already see some bits in action, cf Next.js Image
π¬ THREAD END!
Follow @sebastienlorber for the next threads!
Going to turn these threads into emails (when I'll have more time).
βοΈ Pre-subscribe here: tinyletter.com/slorber
β€οΈ Like this thread 𧡠?
π Please Retweet π
π Follow the link π
Previous editions?
Keep reading π
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.