Hi everyone!
I'm just back from vacations: we catch up with 2 weeks of news!
A new React Labs post now presents React Forget as a reactivity compiler.
Server Components never cease to surprise. Many related innovations are not yet highlighted outside a few tweets.
For React-Native developers, Chain React is a great conf in the USA (Portland, May 18-19). They offer us a 10% discount with code thisweekinreact.
π‘ Subscribe to the official newsletter to receive an email every week!
πΈ Sponsor
React-admin - The Open-Source Framework for B2B apps
Single-Page-Apps are still the best choice to create admin panels, B2B apps, and ERP systems on top of REST/GraphQL APIs. React-admin is the open-source framework of reference for building SPAs.
React-admin offers a library of 150+ business-oriented components. It's not a UI kit: it leverages the best UI kit for React, MUI. React-admin boosts developer productivity by assembling the best-in-class libraries, managing all the repetitive stuff you shouldnβt have to deal with.
Its strongest point? The best developer experience you'll ever have, backed by an awesome documentation and a vibrant community. And it only takes 30 minutes to get started π
React-admin has been actively maintained for 5 years, and has already convinced more than 20,000 developers worldwide. Come try it, it is free, forever! π
βοΈ React
React Labs: What We've Been Working On β March 2023
An official update from the R&D around React that addresses different topics:
- React Server Components. A nice implementation is already available in Next.js via App Router. RSCs with async/await should also be able to run in a client app. I have the impression they want to unify client/server side model and I think AsyncContext will be great for that!
- Asset loading: integration with Suspense for loading CSS, font and images (more details).
- Document Metadata: first-class support for an API for
<head>metadata with streaming support. - React Optimizing Compiler: no longer presented as an auto-memoizing compiler, but as a reactivity compiler. React Forget has reached a milestone, and they are focusing on integration.
- Offscreen Rendering: an innovation I'm really looking forward to, which differentiates React from other frameworks. Meta is testing prerendering on React-Native apps with positive results.
- Transition Tracing: permits to detect slow transitions.
- π₯ React.dev on ProductHunt - Product of the day
- π€ Tom Occhino and Dominic Gannaway joined Vercel.
- π Server Components can lazily send modules to client.
- π Jarred Summer - "Server Components is coming in Bun v0.6.0"
- π Lee Robinson - "Improved sitemap support is coming to Nextjs"
- π Lee Robinson - "The Next.js App Router now supports static exports!"
- π Astro roadmap - Client-side Routing: Astro plans to implement client-side navigation. Opt-in: Astro remains by default an MPA framework.
- π Vercel - Remix without Limits: Vercel now offers first-class integration with Remix.
- π¦ Dan Abramov - "weβve changed our forms recommendations to emphasize uncontrolled inputs"
- π Learning React from two Angles in 2023: it is possible to learn React as a library, or as a framework/architecture (Next.js). Not easy to know where to start for a beginner.
- π Refs in React: from access to DOM to imperative API: good intro to refs, forwardRef, useImperativeHandle.
- π Rethinking React best practices: describes well the trend of React which is progressively moving from a simple UI library to a full-stack architecture.
- π isMounted tricks are code-smell: if you use this kind of pattern, I think it will become a problem with the future Offscreen API.
- π Setting State On An Unmounted Component
- π The useEffect cleanup and the two circumstances it's called
- π How Will the Future of Web Development Be Affected by Influential New React Docs?
- π Making Tanstack Table 1000x faster with a 1 line change
- π How to build zero-CLS A/B tests with Next.js and Vercel Edge Config
- π Custom fonts without compromise using Next.js and
next/font - π Animated page transitions with Remix's nested routes
- π¦ Storybook 7.0: nice release with Vite, CSF3, API frameworks, MDX2... The new features have already been presented before, but we'll probably get a blog post soon?
- π¦ Server Components Demo updated
- π¦ Ark UI: the Chakra UI team introduced a new universal UI lib (React, Vue, Solid) based on Zag.js state machines.
- π¦ Simple-RSC: simple and annotated Server Components implementation, related to a long stream between Ben Holmes (Astro) and Dan Abramov.
- π¦ Impala - A very simple static React framework
- π¦ Webpack-RSC
- π¦ MDX syntax highlighting VS Code extension
- π¦ ContentLayer 0.3.1 - React Server Components support
- π¦ Styling Addon: configure styles and themes in Storybook
- π¦ Docusaurus 2.4
- π¦ Framer Motion 10.9 - Timelines
- π¦ Planby 2.3.0 - Schedule / Timeline for React with
- π¦ Ionic 7
- π§βπ React.gg: new promising React course in private beta
- π₯ Theo - So I had a call with Dan...: I agree that the client/server components naming is not ideal, and "use interactive" seems to me a good idea.
- π₯ Smarter and Simpler React State
- π₯ Next.js App Router: Routing, Data Fetching, Caching
- π₯ The official T3 Stack Tutorial
πΈ 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.com)
- Next.js + Tailwind with visual editing (github.com)
Or run Β npx create-tina-app@latestΒ then visit localhost:3000/admin
Watch the 4-min demo video
π± React-Native
- π Storybook for React Native (6.5): great news for Storybook users on React-Native, the integration is catching up with Storybook web, adopting CSF, Controls, Args, and should soon be compatible with Storybook 7.0. With the new Metro features (
require.context), the need to generate a story index should soon disappear. - π How Migrating from Vanilla Redux to Redux Toolkit Improved State Management in Shopify POS: feedback on an incremental migration to RTK, removing 3500 lines.
- π RFC: DOM traversal and layout APIs in React Native: new advanced API could unlock the implementation of features like
MutationObserver,IntersectionObserver... - π View Flattening on iOS: React-Native could already optimize on Android by avoiding to create useless native views. Samuel explains how it works and announces that now it works for iOS too.
- π Expo Router + Apple Handoff demo: great iOS innovation to switch from web <=> mobile, and it should work well with universal Expo Router apps π
- π₯ The Joy of Painting with React Native: new style of Skia ASMR video by William Candillon π
- π¦ React-Native WebView 12.0: new architecture support.
- π¦ React-Native 0.76.1: new releases fixing XCode build issues.
- π¦ Expo-Blur - Android support: BlurView will soon be cross-platform.
- π¦ Tzvetan Mikov - "Messenger for MacOS is a React Native app."
- ποΈ RNR 263 - Shopify Goes React Native!
- π₯ Chain React: conf in Portland, May 18-19 (-10% discount with "thisweekinreact" code).
π§βπ» 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
- Updates from the 95th TC39 meeting: nice progressions, including AsyncContext (stage 2)!
- Node.js compatibility for Cloudflare Workers: including AsyncLocalStorage (~= server-side AsyncContext)
- WebKit Features in Safari 16.4
- JavaScript import maps are now supported cross-browser
- Push notifications are now supported cross-browser
- Types in JavaScript With Zod and JSDoc
- Qwik 1.0 RC
- pnpm 8.0
- Tailwind 3.3
- Deno 1.32: Enhanced Node.js Compatibility
- Rome v12
- Moon 1.0
- Bun 0.5.9
π€ Fun
See ya! π
Top comments (0)