🧡 This Week In React

πŸ‘‰ Remix 1.0
πŸ‘‰ Test Selector API
πŸ‘‰ 3D Scene
πŸ‘‰ Prev unnecessary renders
πŸ‘‰ Next.js offload scripts
πŸ‘‰ Tamagui cross-platform UI kit
πŸ‘‰ Partial hydration
πŸ‘‰ Lighthouse 9
πŸ‘‰ Cloudflare Pages
πŸ‘‰ Fundraisings

... more in the newsletter πŸ˜‰

🧡 Details πŸ‘‡
🧡 @remix_run launches in v1

Focus on UX, progressive enhancement, perf

Leverage existing Web APIs => reusable skills

Landing page parallax explains most important parts in 5min ⏱️

!= Next.js, @ryanflorence says it's more like Rails (intro video)

remix.run
🧡 React Test Selectors

Experimental RFC API by @brian_d_vaughn

Should make e2e tests more robust

Cross-platform: should work with RN, R3f...

Ability to select by text, testName (like TestingLib testId), but also component!

gist.github.com/bvaughn/d3c8b8…
🧡 Build stunning 3D scenes with React Three Fiber

@winkerVSbecks destructs techniques with R3

From basics to @storybookjs integration, composition, animation, custom shader

varun.ca/modular-webgl

@0xca0a reminds R3f works cross-platform (RN):

🧡 How To Prevent Unnecessary React State Update Re-renders

@keraito highlight some not-so-widely known things about state updates

setState(v => v) does not produce re-render, but beware of unnecessary shallow object/array copies

chakshunyu.com/blog/how-to-pr…
🧡 Next.js proposal to off-load third-party scripts, by @hdjirdeh

Move load to background thread / Web Worker

This can improve web page load perf

Could leverage existing Partytown lib, or build something custom

github.com/vercel/next.js…
🧡 What's Next.js by @NatalieMarleny

New series of online meetups focusing on new, cutting edge things coming in the Next.js ecosystem

Good time to hear about things like Bun, the new bundler from @jarredsumner compatible with Next.js

whatsnext.js.org
🧡 Little thread pause

Don't forget to subscribe by email Folded hands βœ‰οΈ

There's even more content inside and better insight πŸ‘Œ

Take a look at an online edition πŸ˜‰

➑️ ThisWeekInReact.com
🧡 Tamagui by @natebirdman

New abstraction to build cross-platform design systems

Leveraging RNW, atomic CSS

Solves media-queries, theme, design tokens, type-safety, SSR (site using Next.js)...

The compiler can extract conditional inline styles!

tamagui.dev
🧡 react-native-performance by @almouro @bam_lab

New Flipper plugin to monitor app's performance

Inspired by Lighthouse, for React-Native (android only for now)

github.com/bamlab/react-n…
🧡 Don’t use the wrong JDK for React Native if you’re using an M1 Mac

@jamonholmgren suggests to use the Azul Zulu JDK instead of adoptopenjdk8

Can speed up Android app build time x2

shift.infinite.red/dont-use-the-w…
🧡 What is partial hydration and why is everyone talking about it?

@ajcwebdev reminds the hydration "uncanny valley"

Great overview of how frameworks handle things like partial hydrating, progressive enhancement, islands architecture through the ages

dev.to/ajcwebdev/what…
🧡 Lighthouse 9.0 by @brendankenny

New user-flow integration => seems very convenient to measure Single-Page-Application interactions and get some insights

Also improved Lighthouse report readability

developer.chrome.com/blog/lighthous…
🧡 Cloudflare Pages Goes Full Stack by @nevikashah @glenmaddern @1000hz

Cloudflare Pages catch-up on DX

Now allows deploying Workers alongside your static deployment with a single git push

=> CF: commits to make seamless integration with React fwks

blog.cloudflare.com/cloudflare-pag…
🧡 Fundraising week for our hosting providers πŸ˜„

- $150m for @vercel vercel.com/blog/vercel-fu…

- $105m for @Netlify netlify.com/press/netlify-…

- $20m for @render render.com/blog/render-se…
🎬 THREAD END!

Follow @sebastienlorber for the next threads!

πŸ‘Œ Better insights and more content by email

βœ‰οΈ Subscribe now at ThisWeekInReact.com

---

❀️ Like this thread 🧡 ?

πŸ™ Please help me & Retweet the thread "head" below πŸ‘‡

Previous editions?

They are all published online at ThisWeekInReact.com

Read the previous Twitter thread here:

β€’ β€’ β€’

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

9 Nov
🧡 This Week In React

πŸ‘‰ Shopify Hydrogen
πŸ‘‰ React-Router
πŸ‘‰ Storybook interactive stories
πŸ‘‰ State Initializer pattern
πŸ‘‰ React + TDD
πŸ‘‰ Next.js
πŸ‘‰ Expo modules
πŸ‘‰ Skia
πŸ‘‰ TypeScript
πŸ‘‰ Chrome/Lighthouse User Flow

... more in the newsletter

🧡 Details πŸ‘‡
🧡 Hydrogen by @ShopifyDevs

An opinionated React framework for Shopify E-commerce sites

Bets all-in on Server Components, streaming SSR
Oxygen: dedicated hosting infra to come (V8 isolates at Edge)

=> Highly dynamic content without perf compromise

hydrogen.shopify.dev
🧡 React-Router v6 by @mjackson & @ryanflorence

Best of React & Reach routers: code-splitting, TS support, route ranking, config object

New: subroutes relative to parent, <Outlet> comp...

API remains familiar

Extensive migration doc + compact package

remix.run/blog/react-rou…
Read 16 tweets
28 Sep
This week in React

πŸ‘‰ Chat with Swyx & Sunil
πŸ‘‰ Shopify Hydrogen
πŸ‘‰ MUI v5
πŸ‘‰ React antipatterns
πŸ‘‰ useIsMounted
πŸ‘‰ useReducer
πŸ‘‰ Expo OTA
πŸ‘‰ Skia Breakout
πŸ‘‰ Reanimated Layout anim
πŸ‘‰ Colorwaver
πŸ‘‰ Smart client vs Smart server
πŸ‘‰ Rome ➑️ Rust
πŸ‘‰ Partytown
...

🧡 Details πŸ‘‡
1/ 🎧 Podcast with @swyx & @threepointone about various React-related topics



Really interesting discussion, a lot of insights/opinions:
- state machines
- Gatsby 4 vs Next.js
- why swc is a better fit for Next.js

First time I read about Hydrogen & Bun
2/ 🎦 Hydrogen by @ShopifyDevs

πŸ™‰ Slipped under my radar

CEO @tobi says React is about to reach the sweet spot for e-commerce

WIP meta-framework for Shopify
Custom hooks/comps
All-in on React server-components
Using Vite
Deploy on Oxygen platform

shopify.dev/hydrogen
Read 19 tweets
21 Sep
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 🀣
Read 27 tweets
23 Aug
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
Read 15 tweets
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

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

Thank you for your support!

Follow Us on Twitter!

:(