Thread by @sebastienlorber

This week in React

👉 React 18 updates
👉 Gatsby 4
👉 Context
👉 FileSystem routing
👉 Shadows
👉 React & RN history flashback
👉 Next.js & Vercel
👉 State Management
👉 Custom hooks readability
👉 React Native everywhere
👉 React Native windows
👉 Corepack
...

🧵 Details 👇

1/ @dan_abramov shared a long React 18 update, mostly for course creators:

github.com/reactwg/react-…

Some APIs are stable. There's still a good amount of work left

We shouldn't extrapolate the Big Picture vision too much for now

React 18 is not only for FB scale apps

2/ @gatsbyjs 4 introduced by @schaudustin

v4.gatsbyjs.com/gatsby-4/

- SSR
- deferred static generation
- parallel query running

New exciting features, and should close the gap with Next.js in terms of feature parity.

I bet @netlify will support Gatsby SSR/DSG soon 🤣

3/ @PierreOuannes shared how to use React Context like a Pro

devtrium.com/posts/how-use-…

Multiple tips I agree with, some not widely known:

- encapsulate your context behind custom provider/hooks

- memoize value

- split in 2 contexts (state + update API)

4/ @oedotme explains how to create your own file-based routing on top of React-Router

omarelhawary.me/blog/file-base…

Inspired by Next.js APIs

Using Vite (globEager) but this can probably be done with Webpack too IMHO (require.context)

5/ @joshwcomeau explains how to create coherent and realistic shadows in CSS

joshwcomeau.com/css/designing-…

Stop randomly picking box-shadow values!

Use your intuition of how the physical world and lightning works, and techniques like shadow layering

Provides Styled-Components impl

6/ 🎧 How React got Traction

swyx.transistor.fm/episodes/how-r…

@swyx's flashback of React history with this old podcast sample:

- initial VS second introduction

- role of @floydophone and @swannodette 's famous blog post, convincing FP enthusiasts (including me 😜)

7/ 🎧 @vercel and Next.js with @rauchg & @logrocket

podrocket.logrocket.com/vercel

Various interesting insights:

Relationship of DX & UX

Particularly liked the SEO part (Web Vitals, RUM, AMP, CSR...)

Next.js conf (26 Oct): a promise of exciting announcements 🤗

8/ 🧵 10 State Management lessons by @housecor

Most I can agree with 😜

9/ Readability Analysis Of Implementing Custom Hooks by @keraito

chakshunyu.com/blog/react-rea…

Another interesting analysis of the readability tradeoffs of multiple possible React implementations

10/ TypeScript + React: Children types are broken by @ddprrt

fettblog.eu/react-types-fo…

Describes how one very old typing in React typedefs prevents good typing of the children props. And now it's hard to change it 😅.

But you can fix it in your codebase

11/ Running React Native everywhere by @mazzarolomatteo

mmazzarolo.com/blog/2021-09-1…

Matteo published a boilerplate + tooling for developing cross-platform apps. Explains how it works in a series.

🤔 strong opinion: use different RN versions per platform (macos is still 0.63)

12/ 🎧 React Native's Near Death Experience (@swyx mixtape extract from recent @sourcegraph podcast)

swyx.transistor.fm/episodes/react…

Another flashback with @vjeux about the history of RN

React-iOS born from a hackathon to solve mobile dev velocity

Story almost ended there 😆

13/ React-Native-Windows content by @callstackio

Series of 3 blog posts by Bartosz Klonowski + podcast with @grabbou

Various insights, from business to tech: advantages over Electron, details about brownfield RN Windows apps...

callstack.com/blog/why-use-r…

14/ Twitter's div Soup and Uglyfied CSS, Explained by @giuseppegurgone

Explains some details about React-Native-Web, used by Twitter

Mention atomic classes, accessibility, devtools...

giuseppegurgone.com/twitter-html/

15/ React-Native-Screens 3.7.0 by @swmansion

The new onTransitionProgress event on the native stack enables a few new animated use-cases 🤗

16/ Epic vs Apple

"Apple must allow other forms of in-app purchase, rules judge in Epic v. Apple"

Not strictly related to RN, but still quite important news for the mobile industry :)

theverge.com/2021/9/10/2266…

17/ Flutter vs React-Native by @Nash0x7E2

getstream.io/blog/flutter-v…

Article from a Flutter dev from @getstream_io , maintaining SDKs for both platforms.

A bit biased, still an interesting comparison (aware of JSI, maybe not React-Native Skia 😆)

18/ Corepack in Node.js 16.9 by @arcanis (experimental)

nodejs.org/dist/latest-v1…

Allows better integration of Yarn & pnmp in Node.js

Can ensure everyone uses same version

Biasing toward npm usage was not really fair, it's a lucrative company

19/ Small Bundles, Fast Pages: What To Do With Too Much JavaScript by @benschwarz

calibreapp.com/blog/bundle-si…

Good perf tips, many of them can be applied to React apps

Discovered react-live-chat-loader, allowing performant integration of widgets like Intercom

20/ @replayio by @jasonlaster11

replay.io

New kind of time-travel debugging experience

So many thought leaders say it's awesome

Works with any app: not just Redux, and also plan to support backend 😆

21/ @_buildspace

A new project-based course for web devs that want to learn crypto / web

Many said it's a really nice new way to learn while leveraging your web / JS / React knowledge

buildspace.so

22/ Web Vitals patterns

"A collection of common UX patterns optimized for Core Web Vitals. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores."

web.dev/patterns/web-v…

23/ Petite Vue

github.com/vuejs/petite-v…

A new 6Kb subset of Vue, with most of the features, by Evan You

Looks like the equivalent of Preact for Vue

24) TypeScript: In defense of any

fettblog.eu/typescript-any…

Stefan Baumgartner says it's fine to use any if you know what you are doing

Link for your colleague: giveupanduseany.com 😆

🎬 THREAD END!

Follow @sebastienlorber for the next threads!

Going to turn these threads into emails (November)

✉️ Pre-subscribe here: getrevue.co/profile/thiswe…

❤️ Like this thread 🧵 ?
🙏 Please Retweet 🙏
👇 Follow the link 👇

Previous editions?

Keep reading 👇