🧵 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…
🧵 @storybookjs Interactive stories (beta) by @winkerVSbecks
Sometimes, props are not good enough to set a stateful React component in the wanted UI state
Storybook introduces a "play()" method where you can use @TestingLib APIs to do the setup!
storybook.js.org/blog/interacti…
🧵 The State Initializer Pattern
@kentcdodds explains a reset callback has pros over resetting with a React key update:
- lighter, no unmount/remount
- smoother, can preserve animated state transitions
Trap to avoid: an initialValue prop might change
kentcdodds.com/blog/the-state…
🧵 Creating a React component with TDD
@mattibarzeev uses TDD baby steps cycle to test a React component rendering and interactions with TDD
No test of implementation details, using Testing Lib: test remains robust to refactors.
dev.to/mbarzeev/creat…
🧵 TypeScript Control flow analysis for destructured discriminated unions, PR merged by @ahejlsberg
Very useful for React: destructuring props, fetch hooks results...
No need to write unnatural JS just for TS, the following will now compile!
github.com/microsoft/Type…
🧵 File-based routing with React Router
@oedotme continues with Part 2
He adds Vite-based code-splitting to its homemade file-based routing system
Not so complicated to implement in user-land 👍
omarelhawary.me/blog/file-base…
🧵 🎙️🎥 Podcast with @swyx & @leeerob
Lots of interesting subjects!
Couldn't listen to it this week 😅
But definitely will, I'll comment next week!
🧵 @hdjirdeh explains that what the Aurora team at Google did for Next.js
Also, what's to come next.
Note: Aurora seems to also have worked on Shopify Hydrogen ;)
🧵 Embracing Expo Modules in your React Native Projects
@kudochien debunks the myth that Expo modules are only for full-featured Expo apps
It's not all-or-nothing:
- any React-Native app can easily use a single Expo module
- it remains lightweight
blog.expo.dev/embracing-expo…
🧵 New Skia demos from @chrfalch & @wcandillon
Drawing + fragment shaders:
➡️
➡️
➡️
🧵 TypeScript 4.5 RC
ES modules support for Node.js delayed
Some of my highlights:
devblogs.microsoft.com/typescript/ann…
🧵 Chrome & Lighthouse user flows
Chrome allows to record/replay full user flows
➡️ developer.chrome.com/docs/devtools/…
Lighthouse can measure lab perf for nav & user interactions
➡️ objectively measure the whole experience, not just initial page load!
➡️ web.dev/lighthouse-use…
🎬 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:
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.