📨 #142: JSX, React-Query, Server Components, Next.js, Million, OpenNext, Ariakit, Expo-Image, React-Three-Fiber, TS 5.1, Node.js 20, WebGPU...
Hi everyone!
This week, TypeScript 5.1 is released in beta with many improvements related to JSX and React!
React-Query plans to remove query callbacks in version 5, and this idea does not please everyone.
For React-Native developers, don't miss React-Native-Connection on June 1st in Paris! I participated to the talks selection committee, and we just published the complete line-up with international and local speakers. 10% discount with the code "REACTHEBDO".
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
Don't miss the next email!
💸 Sponsor
React-admin - The Open-Source Framework for B2B apps
Are you currently building an admin panel with React? If so, we have some exciting news for you! By using React-admin, an open-source framework for B2B apps, you can spare yourself days of coding! 🤩
With React-admin you can not only save valuable time, but you can also become a better developer! You don't have to take only our word for it, though. There are already over 20,000 developers who use it daily and swear by its effectiveness. And if you're curious about the experiences of developers who have used React-admin for years already, check out NPO Caritas' testimonial.
Join our thriving community as well as Discord server, so you can stay up-to-date on the latest React-admin updates and get support from a network of experienced developers.
So what are you waiting for? Start using React-admin now, it’s free 😉, and take your development to the next level! 🚀
⚛️ React
An important TypeScript release that will allow React to be able to declare its own valid JSX types. It is planned to use this new feature as soon as possible in React typedefs, which have already been forked to continue to support older versions (TypeScript <= 5.0).
There are good reasons to adopt TypeScript 5.1+ as soon as possible. It unlocks among other things:
- the ability to use a React Server Component
asyncin JSX without TypeScript errors or workaround. - the ability to return all valid types for
ReactNode(string, array, boolean...) without needing a fragment (details). - other interesting improvements around JSX: namespaced attributes and linked editing (VSCode).
Breaking React Query's API on purpose
React-Query will remove the callbacks (onSuccess, onError, onSettled) from the useQuery hook with v5. Dominik explains this choice and suggest alternatives more adapted to common cases, like displaying a toast. A controversial but necessary decision because these APIs were often misused. Note: callbacks are kept for useMutation.
- 🧵 Dan Abramov - "good rule of thumb. for any “server components”: explains the minimum requirements for a proper Server Components implementation, taking full advantage of their potential. Presents the limitations of Qwik and Remix models.
- 👀 Dan Abramov has a "story to tell" at Remix Conf ("React from Another Dimension")
- 👀 Next.js ships its own copy of React: copy used only when using App Router.
- 👀 Use Storybook with Rspack
- 👀 WebGPU in React-Three-Fiber demo
- ⚡ SpiderMonkey Newsletter (Firefox 112-113): "We’re working on improving performance for popular web frameworks such as React".
- 📜 Animating View Transitions: explains how to use the new View Transition API (Chrome 111+) in a React context with Next.js App Router, and in a MPA context. Interesting, but the proposed React integration doesn't look ideal.
- 📜 An Animated Guide to Reacts Optional Parameters: interactive article that presents some features of React APIs that we use less often.
- 📜 Next over Remix: feedback from a dev who had planned to switch to Remix, but finally stayed with Next.js.
- 📜 Building a blog with Next.js 13 and React Server Components: uses all the latest Next.js features to create a modern blog.
- 📜 React forwardRef(): How to Pass Refs to Child Components
- 📜 Is React the New WordPress?
- 📜 Becoming an Astro maintainer
- 📜 Display Warning for Unsaved Form Data on Page Exit
- 📜 Mastering React: Techniques to Take Your UI to the Next Level
- 📜 What's new in the new Storybook
- 📜 Full-stack Web Apps Without React
- 🎥 Must Know React Portability Patterns: good advices to reduce coupling of your code to a particular framework.
- 🎥 Maybe Create React App Isn't Dead?
- 📦 Ariakit 0.1.0: new way of managing state based on component stores. Motivations in this RFC: less re-renders, becoming framework-agnostic...
- 📦 Million.js 2.2.1 - Support for hooks and non-primitives. This thread gives interesting explanations about the difference between React and Million reconciliation.
- 📦 OpenNext 1.0: aims to make Next.js more portable thanks to serverless adapter.
- 📦 Astro 2.3
- 📦 React-Three-Next - starter updated - App Router support
- 📦 React-Three-Fiber AutoFocus DOF
Don't miss the next email!
💸 Sponsor
Tina.io is a headless CMS for Markdown-powered sites
- Editing UI for your Markdown files
- UI for MDX components
- Supports static (SSG) and server-side rendering (SSR)
- Option for visual editing (live-preview)
- Build with reusable blocks
Test a starter site
- Docusaurus (Github)
- Next.js + Tailwind with visual editing (Github)
Or run npx create-tina-app@latest then visit localhost:3000/admin
Watch the 4-min demo video
📱 React-Native
- 👀 Hover gesture coming soon to React Native Gesture Handler: future cross-platform API with support for iOS, Android, web.
- 👀 Image perf demo: shows the bad perf impact of using too large images on your React-Native apps.
- 📦 Expo-Image 1.2.0 - ThumbHash support
- 📦 React-Native-Widget-Extension
- 📦 AnimateReactNative: more than 100 animations by Catalin Miron (paid product).
- 🧵 Expo Docs Updates
- 🧵 Jamon Holmgren - "Want to know how easy it is to grab API keys out of a compiled iPhone app?"
- 🎥 Song of Bloom - “Can it be done in React Native?”
- 🎥 React Native File Based Routing with Expo Router
- 👥 React-Native-Connection (Paris, 1er June) is offering us -10% on entries (code "REACTHEBDO").
- 👥 App.js (Krakow, May 10-12) is offering us -20% on workshops (code "ThisWeekinReact20").
- 👥 Chain React (Portland, May 18-19) is offering us -10% on entries (code "thisweekinreact").
🧑💻 Jobs
🧑💼 Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote
Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses.
🧑💼 Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly
Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!
🧑💼 G2i - 100% Remote React Native Jobs
We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.
🔀 Other
- Node.js 20 Now Available: with stable test runner, permission model, compiling to executable binary...
- pretty-ts-errors: great idea to improve the TS DX in VSCode.
- total-typescript/shoehorn - Partial mocks in TypeScript
- Chrome ships WebGPU: in Chrome 113+.
- WebGPU Fundamentals
- Turborepo 1.9
🤭 Fun
See ya! 👋
