🧵 This Week In React

⚛️
👉 Next.js
👉 Signals
👉 useSyncExternalStore
👉 Server Components
👉 TanStack Bling
👉 Forgetti
👉 Suspense Toolbox
👉 Module Extraction

📱
👉 Expo
👉 Reanimated
👉 Metro
👉 Restyle
👉 DankStyle
👉 RFCs

Links ➡️ thisweekinreact.com/newsletter/136

Preview 👇 🧵 Intro

Signals remained a trending topic this week
Great Next.js 12.3 release unveiling a new cache system

Also many new for React-Native!
Expo 48, Expo Router 1, Expo Image 1, Reanimated 3, Metro symlinks support!

✉️ Subscribe by email - Much better!
👥 Join 17000+ readers

Different perspective 🤪

"Mutability has great positives
But thinking immutability is bad may just mean some past patterns were problematic, and not that the entirety of immutable data is bad"

useMemo/useCallback will go away someday

https://twitter.com/Steve8708/status/1629646767234121728

I can agree, but maybe the pain is only temporary?

Maybe we shouldn't throw the immutability model because of short-term difficulties, and the platform should evolve to support better the immutable UI model

Things like Records & Tuples can greatly help

https://twitter.com/youyuxi/status/1629636967473496064

🧵 This Week In React

👉 Next.js 13
👉 Turbopack
👉 Remixing Shopify
👉 React-Three-Fiber Journey
👉 Gatsby Valhalla
👉 Full Stack Comps
👉 Rive
👉 Storybook
👉 React-Query
👉 Docusaurus
👉 Asta
👉 Expo 47
👉 TypeScript 4.9
👉 stc

... more by email ✉️

🧵 Details 👇 🧵 Intro

What a week 🤯

- Next.js conf: Next.js 13 + Turbopack
- Shopify acquires Remix
- Three.js Journey goes React
- Gatsby 5 releases Valhallah

Also testing a new format, do you like it?

✉️ Subscribe by email - Much better!

revue.thisweekinreact.com

Sneak peek below 👇

I'll do a thread with all the funny tweets I gathered for my React newsletter

Too much fun to not share 🤭

Just wondering if I should exclude non-React/frontend memes?

Should I include these? 👇

https://twitter.com/TwitterDev/status/1227640996038684673

Or this?

https://twitter.com/ddprrt/status/1442839365487562753

There are 16 hooks in React 😏 😈

And I bet you never used this one: useSyncExternalStore()

Used internally in state management libs, like Redux

But have you ever thought about using it in your own app code?

💡 It could be useful & even prevent some React re-renders

👇 🧵 Let's start with a real-world problem.

Imagine you are using React-Router and call useLocation() in a few places

➡️ do some conditional rendering depending on pathname, hash, ?search query-string...

🧵 This Week In React

👉 Click To Component
👉 Zag
👉 Why I don't miss React
👉 Next.js -> Remix
👉 Next.js ISR
👉 Next.js Router
👉 Component Party
👉 Convex
👉 Concurrent React
👉 Tilg
👉 RN 0.69 RC
👉 Expo 45
👉 RN-Skia, Graph
👉 TS Error Translator

More by ✉️

Details 👇 🧵 Intro

Great week for React-Native: 0.69 RC, Expo 45, Skia...

New cool toys: Zag, Tilg, Click-To-Component, Convex, Component Party, TS Error Translator...

✉️ A lot more links in the email
(a few nice TypeScript and Wasm ones)

ThisWeekInReact.com

🧵 This Week In React

👉 Ladle
👉 Preemptive memoization
👉 Remix Stacks
👉 Upgrading Next.js
👉 Wix // SSR
👉 Shopify Polaris Viz
👉 RTK Listener middleware
👉 Remix Review
👉 React-Spline
👉 React-Runner
👉 Storybook
👉 React-Native 0.68 RC3

... more by ✉️

🧵 Details 👇 🧵 Intro

Interesting Remix and Next.js content this week

Ladle: faster Storybook

Nice React-related feedback from Shopify and Wix

React-Native: calm week, but v0.68 / Fabric is coming!

✉️ Subscribe by email or read online (more content inside)

ThisWeekInReact.com

🧵 This Week In React

👉 Server Components @ Shopify
👉 Composition
👉 Context Perf
👉 Icons + React
👉 React-Native-Web + Remix
👉 Offline React-Query
👉 Partytown + React
👉 Gatsby trailingSlash
👉 Deno web apis
👉 Immutability
👉 Stately editor

... more by ✉️

🧵 Details 👇 🧵 Intro

Many great articles this week

In particular a first pragmatic feedback from Shopify on using Server Components.

✉️ Subscribe by email or read online (more content inside)

➡️ ThisWeekInReact.com

🧵 This Week In React

👉 Remix + web
👉 MDX 2
👉 React + lifetime analysis
👉 Schema Form System
👉 React Quick Start docs
👉 Story of React
👉 Debugging
👉 RN Usage Tracker
👉 Porting tsc to Go
👉 Deno 2021
👉 Error Cause
👉 Trailing Slash

... more by email ✉️

🧵 Details 👇 🧵 Intro

Calm week for React & React-Native

Still interesting for the ecosystem, converging to std web APIs: Remix, Deno, Node.js fetch() + JSON modules...

✉️ Subscribe by email or read this online (more content inside)
➡️ ThisWeekInReact.com

🧵 This Week In React

👉 Remix: server state, waterfalls, + Next, + Prisma
👉 Remotion 2.6
👉 Preact Tutorial
👉 Relay 13
👉 3D particles
👉 RN ➡️ SwiftUI
👉 JSI
👉 Skia
👉 TypeScript
👉 Container Queries
👉 Browser-Vite
👉 NAPI-RS 2

...more by email! ✉️

🧵 Details 👇 🧵 Intro

No big unexpected React announcement this week, but a good variety of interesting reads!

@remix_run continues to get great marketing from its early adopters!

✉️ Subscribe by email or read this online (more content inside)
➡️ ThisWeekInReact.com

Why web3 is always associated with blockchain?

How a decentralized blockchain DB is even related to the web in the first place? 🤷‍♂️

What about alternatives?
Like the one the creator of the web works on: techcrunch.com/2021/12/09/tim…

Is crypto the only way to solve centralization? Read this

https://twitter.com/moxie/status/1479567493215637506

🧵 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

🧵 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

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

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

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-…

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…

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=…

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:

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!

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: