This Week In React #86: Special React Conf, React-Forget, Web-Components, Framer Motion 3D, Expo, Turborepo, Tailwind, Vitest...
React
Andrew Clark about the React 18 vision: "Our north start: to make it easier to build great user experiences". With React, designers and developers speak the same language. Recalls the close relationship between UX and DX.
Juan Tejada about Suspense: the problems solved, like race conditions or annoying friction during the design of app loading experiences ... Suspense on the server side (React.lazy) will be released in React 18.0, but for data fetching we will have to wait a little longer.
Lauren Tan about React 18: there is no concurrent mode anymore, only concurrent features that you can opt-in gradually. Adopting React 18 looks easy and should be pretty backward compatible if you don't use new APIs. A Release Candidate is available!
Andrew Clark about Server Components: feature enabled thanks to
Suspense. Awesome DX, allows to reduce bundle size significantly. In preview, can only be tested in Next.js and Hydrogen. Will be released in a React 18 minor version (after 18.0). A new dedicated working group has been created.Ricky Hanlon about React-Native: in reality, React === React-Native. The work on one platform permits to improve all the others (various examples given). React-Native is not building for the lowest common denominator of all platforms, but want to allow building the best UX on each platform without any compromise. This is exactly why I'll stick with React!
Xuan Huang about React without Memo: that was the unexpected surprise of the conference. Facebook/Meta is working on React Forget, that smart compiler that they spoke about a few years ago. This should allow to write performant React code without using
useMemo,useCallbackand evenReact.memo! There are a lot of complex problems to solve, and this project might even fail (remember Prepack?). But it's very encouraging to know that this is being worked on by a smart guy (Xuan is also working on Hermes, the React-Native AOT runtime).Brian Vaughn about React DevTools: details how DevTools work, mention useful improvements (named hooks...), and the integration with various new React 18 features (scheduler,
useDeferred,Suspense...). Great bonus insight: React-Native is well-equipped to handle 2D/3D VR needs (hmm, is this related to the Metaverse? 🤔). There also seems to be a need for React-Native/VR Server-Driven UI (I hear React-Native Server Components? 🤔)
There were a lot of other great talks that I couldn't summarize here unfortunately 😅
Extras:
React & Custom Elements: Web Components support has been merged (experimental tag) and may be included in React 18.x
React Server Components & Remix: Remix does not use yet Server Components. This post presents many demos where Remix outperforms official Server Components demos from the core team and Vercel. Dan Abramov comments. Existing demos may not be very optimized yet, but it's still nice to see Remix having great performances. It's not clear if Remix will benefit from React Server Components yet.
What is Remix? TL.DR: "a compiler for React Router"
🧵 Dan Abramov: "a hundred things i learned working on the react team"
Framer Motion 3D: Framer Motion meets React-Three-Fiber. Demos are super cool!
Introducing the new Relay compiler: explains why there's a compiler and why it was rewritten in Rust (perf x5)
Ariakit: v2 of Reakit
Docusaurus 2 beta.10: includes a much-awaited feature: link a sidebar category to a doc
Redux Toolkit 1.7: SSR support for RTK Query
Sandpack: supports React DevTools
Partners
Start React Native: learn everything about gestures and animations with William Candillon
React-Native Weekly: stay up-to-date React-Native core updates
TypeScript Weekly: the best TypeScript links every week, right in your inbox.
ES.next News: learn about the latest in JavaScript and cross-platform tools
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
Infinite Red: US React-Native experts making your idea a reality
React-Native
Le SDK 44 in beta for a week. TL.DR:
new modules to customize navbar/background colors at runtime (see this demo).
Reanimated v2.3, with layout animations
Gesture Handler v2.0, with new gestures API
React-Native-Screens v3.1, with React-Freeze
This nicely reflects the vision of Expo co-founder Charlie Cheever: There’s no reason that building mobile apps has to be harder than building websites. They slowly build the best mobile DX, the counterpart of Netlify or Vercel, and they seem not so far anymore to reach DX parity!
Extras:
The New Architecture Playbook: new doc to adopt the new React-Native architecture, work in progress (PR)
Other
Jared Palmer is well-known in the React ecosystem (Formik, Razzle, tsdx...). His project Turborepo (initially closed-source and not free) has just been acquired and open-sourced by Vercel, that he also joined. This video is a nice 30min overview + a Q&A
Turborepo is a build system for JS/TS monorepos. It should significantly improve build time performance compared to existing alternatives such as Lerna. The idea is to never execute twice the same task. It achieves that by using a caching system (monorepo packages are fingerprinted/hashed and dist artifacts are cached in node_modules/.cache/turbo). This cache can even be uploaded to a remote storage and shared between co-workers and CI/CD pipelines: it seems way faster to download that to re-execute. Jared comments: "Turborepo is Dropbox for dist directories". There are many other interesting features, like the ability to declare dependencies between build steps (pipeline), analyzing the graph of dependencies, profiling build performances in Chrome DevTools...
This new tooling is already well-integrated in Vercel: you get some remote caching storage for free. You can also self-host: Vercel does not lock you in and just improves DX, but it looks to me the plan is to provide more useful cloud-related services on Vercel in the future, to make their platform even more attractive. This also reminds Nx, an existing tool that also has a cloud offering.
Extras:
Tailwind CSS v3: new version released with a great trailing and a bunch of new useful features. I like the JIT compiler, and most importantly the ability to use any arbitrary CSS property: this looks as convenient as inline styles, but much faster
Vitest: new test runner in private beta, based on Vite. Looks like a serious Jest competitor, using modern features (Vite, ESM, top-level await, TypeScript...), and aiming to make it easy to transition to (snapshots, matchers, compatible expect() api...)
ts-belt: FP in TypeScript
Learn Responsive Design: 5 new modules
