This Week In React #139: React.dev, Remix, next export, Server Components, Error Boundary, Wakuwork, Astro, React-Native, Bottom Sheet, TC39...

Search for a command to run...

No comments yet. Be the first to comment.
Hi everyone! Krzysztof and Tomasz from Software Mansion here π It's been a fairly calm week for the React ecosystem, but not for the React Native world. Meta has made an exciting announcement about the release of React Native 0.80, where they've dec...

Hi everyone! This week is relatively calm in the React ecosystem, but we still have various interesting blog posts and releases. Maybe we'll soon get some exciting news from React Summit that's about on Friday! On the React Native side, all the devs ...

Hi everyone! I thought I was on schedule for today's issue, until I realized that Dan Abramov wrote 4 RSC blog posts this week π. We also get great releases, including Storybook, LiveStore, Base UI, and the Lingo Compiler is a quite exciting innovat...

Hi everyone! Cyril and Matthieu from Theodo Apps here π. This week, the Remix team announced some big news. Microsoft has also made it easier to try out TypeScript Go rewriting. In the React Native world, there were a few minor but interesting relea...

Hi everyone! This week, we're delighted to finally have a preview of React Server Components support in React Router. I've also found some very interesting PRs on the React repo, and give you a glimpse of what could be coming soon! The React Native e...

Hi everyone!
The new React site is finally out, and it's safe to say that it kicks ass π€ I've put up quite a few related links, and will let you make up your own mind!
There are also some really cool articles. I like the interactive map of React APIs, Remix's approach to breaking changes for v2, or the use of React-Server-Components for translations.
On the React-Native side, the first RC of v0.72 is out. Some long-awaited new features of Metro 0.76 should be available soon, like symlinks support!
π‘ Subscribe to the official newsletter to receive an email every week!
Build reusable blocks. Publish content faster. Get better Core Web Vitals and SEO.
Content editors : a game changer for companies that need to produce a lot of content and have a strong SEO strategy. Marketers and content editors can edit and publish pages without any complexity. Eliminate long delays and publish instantly. Pages and images are optimized thanks to Next.js in order to achieve perfect Core Web Vitals scores.
Developers : plug and play with your existing Next.js app. Number of benefits to use Suncel CMS as developer :
Build your reusable blocks in React
SEO Meta and sitemap are generated automatically (thanks to our SEO module)
Create your own custom settings in React
Admin customizable in React
No routing system needed to fit the CMS
Visit Suncel.io | 5mn demo video
The new React website is finally online! A new article comes with this launch. It's a very big project (both tech and content) that required several years of efforts and many collaborators.
What I like in particular:
The focus on hooks and functional components
The guides with many diagrams, illustrations and interactive challenges
The emphasis of React as a cross-platform solution, not web-only
API pages well separated in references/usage, current/deprecated, client/server
The overall consistency of the whole experience
Some changes were also controversial this week, in particular the fact of recommending only a small list of frameworks to start a new React project (Next.js, Remix, Gatsby, Expo) but not recommending many others (Vite, Create-React-App, client-side SPA...).
Also read:
π§΅ Dan Abramov on possible futures for CRA - "client-only doesnβt make sense. way too limiting"
π§΅ Dan Abramov - Next.js example - purely client-side SPA (no Node.js server, 100% static bundle)
A spatial and interactive representation of the React APIs, with references to great external articles for each of these APIs. I think it's a great idea and a good opinionated complement to the official documentation.
π React PR - Suspend commit without blocking render: a feature that will be used internally first, especially on resources (CSS, font, images). When navigating with startTransition, React will be able to wait a bit until the images of the next page are loaded before commiting the transition (details).
π React PR - Remove layout effect warning on the server: the SSR warning for useLayoutEffect will be removed. Dan Abramov comments on useIsomorphicLayoutEffect.
π§΅ Tim Neutkens on improving next export: compatible with App Router, Server Components...
π Future Proofing Your Remix App: Remix explains their strategy for deploying breaking changes on major releases. They plan to introduce "Future flags" that allow you to opt-in for planned breaking changes in advance. If you managed to activate all flags in v1, it should be easy to upgrade to v2.
π Internationalization In Next.js 13 With React Server Components: Server Components will have a big impact on the way we translate our React apps, especially on performance, code splitting and bundle size. This article introduces the topic well. I give some more extra details in this thread.
π Hooks You Probably Don't Need: presentation of the lesser known hooks of React, classified by chance to need them (hello useInsertionEffect π
). I liked the last section presenting a common anti-pattern and how useLayoutEffect prevents it. I think useSyncExternalStore is great for reading browser APIs such as localStorage.
π Front-Commerce is getting a Remix: after Shopify, it is now Front-Commerce that decides to base itself on Remix. This has many advantages, such as the possibility of using progressive enhancement, an MPA mode, and being less coupled to React.
π Reducing 97% of the Open UI site's JavaScript by migrating to Astro
π¦ React-Error-Boundary v4: new useErrorBoundary API to trigger error boundaries for non-render errors, and reset the boundary easily from anywhere.
π¦ Wakuwork: Daishi Kato works on a minimalistic React framework with React Server Components support.
π¦ Framer-Motion 10.5: useAnimate()
π¦ Remix-Sitemap
π₯ State Management for NextJS 13 Server and Client Components
ποΈ The future of React
Build and Run Synthetic Monitoring That Scales
You build it, you own it! Itβs a simple mantra that has driven software development for years. But what is the best way to monitor complex React applications?
First: Use Playwright to simulate critical user flows and guarantee that your app works. Second: Be confident that mission-critical APIs are up and running.
Monitoring as code is a new way to define, test, and deploy entire Playwright-based testing and monitoring setup directly from code. Get started with the Checkly CLI by running npm create @checkly/cli.
Learn more about the Checkly CLI here.
Unite your QA, dev, and ops teams with Checkly
π Advantages of code splitting in Expo: code splitting (made possible by resolveWeak, Metro 0.76, React-Native 0.72) could have many advantages for Expo Router!
π Built-in TypeScript aliases / absolute paths are coming in Expo SDK 49
π¦ React-Native v0.72 RC.0: the upcoming v0.72 features are listed in Road to 0.72.0: Metro (symlinks, exports, resolveWeak), Hermes...
π¦ Bottom Sheet v5 Alpha: Reanimated v3, Gesture Handler v2, Web support
π¦ React-Native-Permissions v3.8: new architecture support
π¦ React-Native-PDF-Renderer v1: native PDF renderer
π₯ Build a Native View Library with Expo, React-Native, Swift and Kotlin
π₯οΈ The React Native Show #21 - Profiling in native and React Native
π§βπΌ 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.
Agenda for the 95th meeting of Ecma TC39: Meeting in progress. Async Context candidate for stage 2 π Also some brand new Promise-related proposals.
Announcing Rspack: official introduction article for the new Rust bundler
Farm - Super fast web build tool written in Rust: another one π
TypeScript 5.0: decorators, new config options...
Prettier 2.8.5: TypeScript 5.0 support
6 CSS snippets every front-end developer should know in 2023
See ya! π