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-…
Introducing React 18 by @rickhanlonii

Good entry point to the working group.

Contains more details than the blog post regarding available features, default or opt-in and how to adopt them.

Linking to other discussions to read:
github.com/reactwg/react-…
Want to know more about the story behind React 18?

@dan_abramov and @rickhanlonii wrote 2 threads with details behind the scene:

React 18 Alpha is out! Now what?

@cassidoo highlights some of the changes of React 18:
- new root API
- Suspense behavior change
- opt-in features like startTransition, useDeferredValue...

netlify.com/blog/2021/06/0…
What’s new in React 18

@eveningkid created a great 5min video to present the most important features

Short and easy to understand, best React 18 intro to me.

How to use TypeScript with React 18 alpha

@johnny_reilly explains:
- upgrade your DefinitivelyTyped types
- until the official v18 release, opt-in for "react/next" in your TS config.

blog.logrocket.com/how-to-use-typ…
Redux Toolkit v1.6 released by @acemarke

Officially adds RTK Query data-fetching abstraction to RTK

Should reduce the boilerplate required to fetch/cache backend data in Redux

github.com/reduxjs/redux-…
Don't overabstract your components

Interesting post by @kirjai about component API design

Example using Select.
Should it receive options as props array or children?
=> children may be a better choice

kirjai.com/component-abst…
React-Native 0.65 RC: a first release candidate has been published by @Kelset @lord_sherlock

Changelog available, feature highlights not available so you'll have to find out

github.com/facebook/react…
React-Native Reanimated 2.3 alpha released by @Turbo_Szymon @swmansion

Introducing layout animations!

Doc: docs.swmansion.com/react-native-r…

Another great intro video by @eveningkid:
Astro: Ship Less JavaScript

Next-gen static-site generator by @FredKSchott

Pit of success: it only outputs HTML and makes it hard to build a slow website by default.

Easy opt-in for JS components using the fwk of your choice with partial hydration

astro.build/blog/introduci…
Vue 3.1 released by @youyuxi

Highlight is the Migration Build
Making it easier to upgrade from Vue 2 by providing a compat layer

github.com/vuejs/vue-next…
10 static site generators to watch in 2021

@philhawksworth analyzed the trends of the current Jamstack tooling and suggest watching... 11 SSGs in 2021.

Happy to see @docusaurus here!
Too late for @astrodotbuild to make it πŸ€ͺ

netlify.com/blog/2021/06/0…
🎬 THREAD END!

Follow @sebastienlorber for the next threads!

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 πŸ‘‡

β€’ β€’ β€’

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

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
3 May
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:

The @vercel team is working hard to improve the Next.js DX even more.

10.2 release improves startup time, hot reload, and many other things.

The Webpack 5 rollout has started for simpler Next.js sites and should also improve rebuild times significantly

nextjs.org/blog/next-10-2
Read 20 tweets
12 Apr
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-…
Read 18 tweets
5 Apr
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:
Next.js 10.1 by @vercel contains significant improvements to Fast Refresh, install time, images

Webpack5 will roll out progressively

The Next.js team plans to make DX even faster.

More high-level tools get released: Shopify integration, Nextra blog...

nextjs.org/blog/next-10-1
Read 16 tweets
29 Mar
This week in React

πŸ‘‰ Suspense & Concurrent Mode news
πŸ‘‰ React API evol
πŸ‘‰ Piral: React microfrontends
πŸ‘‰ React-Spring 9
πŸ‘‰ Instagram Lite & Bloks
πŸ‘‰ Human-Readable JS
πŸ‘‰ CSS container queries
πŸ‘‰ vanilla-extract
πŸ‘‰ Deno company
πŸ‘‰ SvelteKit
πŸ‘‰ tRPC
πŸ‘‰ ...

🧡🧡🧡 Details πŸ‘‡πŸ‘‡πŸ‘‡
After almost 1 year, @dan_abramov gives fresh news about Suspense and ConcurrentMode.

- We see the light at the end of the tunnel.
- We don't have large "unknown unknowns" anymore.

Work has shifted to ecosystem compatibility & incremental migration path

github.com/facebook/react…
In React API evolution, @alex_frantic shows that React hasn't changed much conceptually.

2013 code can still work today by using a compat layer.

I've adopted React at 0.5.3 πŸ€ͺ didn't know there was React.autoBind, but have used LinkedStateMixin :)

frantic.im/react-api-evol…
Read 15 tweets
15 Mar
This week in React

πŸ‘‰ React "Fizz"
πŸ‘‰ Docusaurus i18n
πŸ‘‰ Relay hooks
πŸ‘‰ Preact Server Components
πŸ‘‰ ReactNative 0.64
πŸ‘‰ Bob
πŸ‘‰ React-Navigation 6
πŸ‘‰ CSS for JS devs
πŸ‘‰ TS Constrained Identity Function
πŸ‘‰ ES 2021, TC39 updates
πŸ‘‰ TS-Pattern 3
πŸ‘‰ SvelteKit
...

🧡🧡🧡 Details πŸ‘‡
🧡 React "Fizz": looks like a new project code for React.

The goal is to support Suspense on the server (SSG + SSR) with streaming support!

@sebmarkbage opened many pull-requests already, one of them set-up some initial architecture and document Fizz.

github.com/facebook/react…
🧡 Docusaurus v2 i18n released!

This time I can present my own work 😜

You can now translate your doc sites easily.
v2.docusaurus.io/blog/2021/03/0…

We already have a few early adopters!
- Jest: jestjs.io/blog/2021/03/0…
- Redwood: learn.redwoodjs.com/fr
- PNPM: pnpm.js.org/zh/
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 Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(