Seb βš›οΈ ThisWeekInReact.com Profile picture
Apr 12, 2021 β€’ 18 tweets β€’ 12 min read β€’ Read on X
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-…
Discovered UmiJS by @chenchengpro

A React application framework that can output a static SPA.
github.com/umijs/umi

Looks quite popular already and has its own ecosystem, including an opinionated doc site generator called Dumi:

github.com/umijs/dumi
Figma to React by @tomsoderlund

It can convert a Figma design to:
- React-Native
- React+Styled-JSX

Code output looks quite clean

figma-to-react.vercel.app
Recoil 0.2 released by @mcc_abe

Improvements on async selectors, performance and scalability, and various bugfixes.

Future releases will have memory management features like cache eviction policies (LRU).

recoiljs.org/blog/2021/03/2…
Hermes progress continues!

After Proxies in RN 0.64, @huxpro said Intl support should be added in React-Native 0.65 for Android.

github.com/facebook/herme…
About Hermes and OTA:

@mrousavy it seems RN CodePush OTA already works, even with the newly released iOS support! (community feedbacks from @mrousavy)

github.com/microsoft/reac…

And @expo is likely to add Hermes support soon too!
It's a bit difficult to see how the next-gen build tools are different from one another.

@elliotclydenz did a great job comparing them and explaining the tradeoffs!

It looks like Vite by @youyuxi is the simplest option for a drop-in CRA replacement.

css-tricks.com/comparing-the-…
But there are new nextgen build tool contenders!

Enter Bundless by @__morse

It looks interesting, as it bets fully on esbuild and its plugin ecosystem, even for the production build.

github.com/remorses/bundl…
Another interesting innovation: Microsite, a static site generator based on Snowpack and Preact, by @n_moore . .

github.com/natemoo-re/mic…

Following the progressive enhancement pattern:
- Supports "automatic partial hydration"
- Ships minimal JS to the browser
Replacing "let" with "const"

charles-stover.medium.com/replacing-let-…

Can't agree more with this article from @CharlesStover

Your code becomes simpler by using an inner function + return.

Alternatives: IIFE or do-expressions (stage-1):
github.com/tc39/proposal-…
How to actually test UIs by @winkerVSbecks

Interesting post explaining the tradeoffs of 5 different ways to test UI / components:
- visual
- compositions
- interaction
- accessibility
- user-flows (end-2-end)

storybook.js.org/blog/how-to-ac…
Vue 3 drop its initial plan to support IE 11

According to this RFC by @youyuxi , explaining the decision:

github.com/vuejs/rfcs/blo…

It's planned to backport important features to Vue 2 for those that need to support IE11
XState Catalogue by @mpocock1

A collection of well-designed state machines for XState.

Includes various patterns from complex forms like wizards) to data-fetching patterns like infinite-scroll

xstate-catalogue.com
Chrome DevTools migrated 150k LOC from Closure Compiler to TypeScript.

@TimvdLippe tells the story behind this migration:

- catch more errors than before, but increased compilation time

- using @ts-nocheck everywhere and removing it one file at a time

developer.chrome.com/blog/migrating…
🎬 THE END!

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 Seb βš›οΈ ThisWeekInReact.com

Seb βš›οΈ ThisWeekInReact.com 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

Mar 1, 2023
🧡 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 πŸ‘‡ Image
🧡 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
Next.js 12.3 was released with great new features.
Many we already knew were coming.

What surprised me most is the new caching system of Next.js leveraging Vercel infra.

Worth checking this thread + link:


"This really unlocks the Edge" Image
Read 9 tweets
Feb 27, 2023
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

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

"make the right technical choice, and make the right long term choice"

I think the React team still follow this today

I can understand signals are appealing right now, but is it the way you want to write code in 10 years once the platform has improved?

Read 7 tweets
Nov 2, 2022
🧡 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 πŸ‘‡
🧡 Next.js 13 - @vercel

New app/ directory: enables the new features and latest React 18 innovations like React Server Components and streaming

Nested layouts!

Turbopack: new alpha Rust bundler

Also improves image + font + link and many other things

nextjs.org/blog/next-13
Read 24 tweets
Oct 31, 2022
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? πŸ‘‡

Read 6 tweets
Sep 6, 2022
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

πŸ‘‡ 🧡 Image
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... Image
There are a few potential performance problems, for example:

- whenever you click on hash link, components reading only pathname will re-render ➑️ useless

- whenever you update the ?search querystring link, components reading only pathname or hash will re-render ➑️ useless
Read 13 tweets
May 4, 2022
🧡 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 πŸ‘‡ Image
🧡 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
🧡 Click To Component by @ericclemmons

Option+Click a React component in your browser to instantly open the source file πŸ‘Œ

Looks very convenient and easy to set up!

Only VS Code, but other IDE support possible
(there's already a PR for Intellij πŸ€—)

github.com/ericclemmons/c…
Read 21 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

Don't want to be a Premium member but still want to support us?

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

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(