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 πŸ‘‡

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Sebastien Lorber πŸ‡«πŸ‡· πŸ¦–

Sebastien Lorber πŸ‡«πŸ‡· πŸ¦– Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @sebastienlorber

14 Jun
This week in React

πŸ‘‰ React 18 links:
- Plan for React 18
- Working Group
- Intro
- Story
- Now what?
- With TS?
- TL.DR Video

πŸ‘‰ Redux Toolkit Query
πŸ‘‰ Don't overabstract comps
πŸ‘‰ React-Native 0.65 RC
πŸ‘‰ Reanimated 2.3 layout animations
πŸ‘‰ Astro
πŸ‘‰ Vue 3.1
πŸ‘‰ ..

🧡 Details πŸ‘‡
The @reactjs team published a new post

The Plan For React 18:
- first alpha published
- mention available features
- introducing the working group
- gradual adoption strategy
- stable release expected in a few months

reactjs.org/blog/2021/06/0…
The React 18 working group is a GitHub repo containing Read-only discussions (unless you are invited to contribute).

Already contains a lot of new useful information to process

github.com/reactwg/react-…
Read 16 tweets
17 May
This week in React

πŸ‘‰ Docusaurus 2 Beta
πŸ‘‰ Chose React over Vue
πŸ‘‰ (un)controlled inputs
πŸ‘‰ Eliminate problems
πŸ‘‰ Recoil 0.3
πŸ‘‰ Coinbase -> React Native
πŸ‘‰ Stripe-React-Native
πŸ‘‰ Hermes on iOS
πŸ‘‰ Babel drama
πŸ‘‰ TypeScript 4.3 RC
πŸ‘‰ TS 7 sources of unsoundness
...

🧡 Details πŸ‘‡
We released the @docusaurus v2 beta!
It's easier than ever to create a doc website!

v1 feature parity is here with i18n, and core features are stable enough!

docusaurus.io/blog/2021/05/1…

Check our best documentation websites here:
docusaurus.io/showcase?tags=…
Bill gives good reasons why he prefers React over Vue here:
- TS compatibility, JSX is just JavaScript
- Functional purity

javascript.plainenglish.io/why-i-finally-…
Read 17 tweets
3 May
This week in React

πŸ‘‰ Remix v1 beta
πŸ‘‰ Next.js 10.2
πŸ‘‰ Redux 4.1
πŸ‘‰ Babel 7.14
πŸ‘‰ Safari 14.1
πŸ‘‰ Suspense is killing me
πŸ‘‰ Key prop
πŸ‘‰ Advanced Framer Motion
πŸ‘‰ Design system: Stitches & Radix
πŸ‘‰ Airtable Flow ➑️ TS
πŸ‘‰ Inspx
πŸ‘‰ Expo + Next.js
πŸ‘‰ Mighty
...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
Remix v1 first beta!

The React meta-framework built by @mjackson & @ryanflorence launched as a 1h30 Youtube stream:

The @vercel team is working hard to improve the Next.js DX even more.

10.2 release improves startup time, hot reload, and many other things.

The Webpack 5 rollout has started for simpler Next.js sites and should also improve rebuild times significantly

nextjs.org/blog/next-10-2
Read 20 tweets
12 Apr
This week in React

πŸ‘‰ React-Hook-Form 7
πŸ‘‰ React-UX-Form
πŸ‘‰ Dumi
πŸ‘‰ Figma-To-React
πŸ‘‰ Recoil 0.2
πŸ‘‰ Hermes Intl + OTA
πŸ‘‰ Nextgen buildtools
πŸ‘‰ Bundless
πŸ‘‰ Microsite
πŸ‘‰ Let ➑️ Const
πŸ‘‰ How to test UI
πŸ‘‰ XState Catalogue
πŸ‘‰ Vue 3 ❌ IE11
πŸ‘‰ DevTools ➑️ TS

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
React-Hook-Form v7 was released by @bluebill1049

react-hook-form.com/migrate-v6-to-…

Most exciting thing is probably leveraging TS 4.1 template literal types and being able to type-check the form against field-name typos!
New React-UX-Form library by @zoontek

Also based on a subscription model and per-field validation (like React-Hook-Form), also using an interesting "validation strategy" concept.

Compat with React and React-Native.

github.com/swan-io/react-…
Read 18 tweets
5 Apr
This week in React

πŸ‘‰ React Labs
πŸ‘‰ Next.js 10.1
πŸ‘‰ Dependency Injection
πŸ‘‰ Fastest Text Update
πŸ‘‰ Tuples?
πŸ‘‰ React React Errors
πŸ‘‰ Expo 41
πŸ‘‰ RN Timeline
πŸ‘‰ Web: Flutter vs RN?
πŸ‘‰ TS 4.3 beta
πŸ‘‰ Coolify
πŸ‘‰ Storybook 6.2
πŸ‘‰ Change Array by copy
...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
React Labs: @abernathyca presented a new official video series of technical deep dives in the React research.


The first video is a Q&A about server components:
Next.js 10.1 by @vercel contains significant improvements to Fast Refresh, install time, images

Webpack5 will roll out progressively

The Next.js team plans to make DX even faster.

More high-level tools get released: Shopify integration, Nextra blog...

nextjs.org/blog/next-10-1
Read 16 tweets
29 Mar
This week in React

πŸ‘‰ Suspense & Concurrent Mode news
πŸ‘‰ React API evol
πŸ‘‰ Piral: React microfrontends
πŸ‘‰ React-Spring 9
πŸ‘‰ Instagram Lite & Bloks
πŸ‘‰ Human-Readable JS
πŸ‘‰ CSS container queries
πŸ‘‰ vanilla-extract
πŸ‘‰ Deno company
πŸ‘‰ SvelteKit
πŸ‘‰ tRPC
πŸ‘‰ ...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
After almost 1 year, @dan_abramov gives fresh news about Suspense and ConcurrentMode.

- We see the light at the end of the tunnel.
- We don't have large "unknown unknowns" anymore.

Work has shifted to ecosystem compatibility & incremental migration path

github.com/facebook/react…
In React API evolution, @alex_frantic shows that React hasn't changed much conceptually.

2013 code can still work today by using a compat layer.

I've adopted React at 0.5.3 πŸ€ͺ didn't know there was React.autoBind, but have used LinkedStateMixin :)

frantic.im/react-api-evol…
Read 15 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(