📨 #126: React Perf, Progressive Enhancement, Remix, Storybook, React-Native, FlashList, Nitro, TC39...

November 29, 2022 · 8 min read

Newsletter Editor - Docusaurus maintainer

Hi everyone!

As you might expect with Thanksgiving, it's a rather quiet week in terms of React news.

It's the end of Black Friday, but some offers are still valid.

If your company is recruiting, I also offer a discount of -50% on job offer ads. Don't hesitate to talk to your HR or your manager, it helps me a lot!

💡 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!

I'm constantly finding interesting things to learn in there.

Dominik DorfmeisterWeb Developer - React-Query maintainer

💸 Sponsor

FlyCode Makes React Apps Editable without coding, Git based

FlyCode (YC S22) makes React web apps editable in minutes so Product and UX teams can iterate and release products faster, so they don't have to wait on (or consume) developer time.

FlyCode reads your regular React code and finds Texts, Images, Design tokens and Analytics event, then it let's non-coders collaborate and edit them and send back a pull request (they don't need access to GitHub!)

Saves development time
No code integration, it just reads your code!
GitHub based, a bot is scanning the code and creates pull requests
Use your own stack and components
Retain codebase ownership

You can get started here: flycode.com/developers

⚛️ React

Is React going anywhere?

Interesting reflection from Ruben, after meeting an e-commerce CTO who decided to abandon React for Vanilla JS. Is React really responsible for the poor performance of his app? Is adopting an alternative justified? Will React remain the leader for the next 5 or 10 years?

Improving React Interaction Times by 4x

Causal's cloud spreadsheet app had performance issues. They give us a detailed analysis of the problems and how they solved them via the Chrome profiler. Some issues related to AG Grid (which they patched). Others from their own code mainly related to memoization. They also tried to use Web Workers, but serialization was too expensive.

📜 Progressively enhance the useFetcher hook in Remix: little trick to support users with/without JS on Remix's useFetcher API: force a redirect for users without JS. In the same way, it is possible to handle progressive enhancement on a file upload. All this is probably not essential for many apps, but it's good to know that it's possible if needed.
📜 Remix Deferred overview: an explanation of how defer works in Remix, which will allow to "teleport" a promise from the back to the front. For those who want to understand the inner workings of Remix.
📜 How to update the state of a sibling component in React?: short article that illustrates well the concept of "Lifting the state up".
📜 Minimal TypeScript Crash Course For React: to get started with TypeScript and React.
📜 Data Structures In Frontend JavaScript In The Real World - With React Code Examples: to become familiar with data structures in a React context.
📜 ArConnect Migrates Its Chrome Extension to the Plasmo Framework: feedback on the use of Plasmo: open-source React framework to create web extensions.
📜 Storybook for full-stack developers: a good overview of all that the Storybook ecosystem can do for you.
📜 Solid Final Form – Proof of Concept: Erik explains that his lib Final Form (popular a few years ago) is decoupled from React and shows that it is possible to use it in a SolidJS context.
📜 Ant Design 5.0 - Component-level CSS-in-JS: the React design system releases a new major version and explains how they have optimized their CSS-in-JS runtime.
🎥 On the merits & limitations of React & single-page apps: 2 hours debate between Alex Russell and Theo Browne. I haven't had time to watch yet. Alex is well known for his criticism of React and SPAs, and Theo should be a good defender of the React ecosystem.
🎥 React Dev, You Need To Know @container!: good introduction to query containers, new CSS feature, presented in a React context in vanilla CSS + Tailwind. Firefox support is still missing, but there is a polyfill.
🎥 RTK Query Basics: Query Endpoints, Data Flow and TypeScript: new free course on Egghead by Lenz one of the creators of RTK Query.
🧑‍💻 Remix PR - Add "jump to definition" support: tRPC contributors port their TypeScript learnings to Remix to improve its DX.
📦 react-three-editor: a React-Three-Fiber scene editor is being created.
📦 Gatsby 5.1

Don't miss the next email!

People always ask how I keep up to date, it's This Week In React.

Jack HerringtonPrincipal Engineer - Youtuber

💸 Sponsor

Yuzu is the Best Finance Data API for Frontends

Yuzu is designed to eliminate data engineering for frontend developers building with data sets like:

Live Stock, crypto & forex prices
Up-to-the minute market news
ETF and Mutual fund details

Developers love Yuzu's GraphQL, Websockets, and SQL APIs because it allows them to flexibly grab any data, and focus on building end-user experiences, not on scraping, normalizing and maintaining data sets.

Yuzu's professional-grade data is used by brokerages, analytical platforms, and investing apps ranging from emerging startups to established finance firms.

Best thing? Anyone can start for free!

📱 React-Native

React Native Core Contributor Summit 2022

A good part of the React-Native contributors met at the beginning of September for the React-Native EU conference. They participated in a series of workshops and give us a report. Various topics were discussed, such as the new architecture, the Metro bundler or the release workflow.

Shopify - Our Solution for Measuring React Native Rendering Times

Presentation of the react-native-performance package which allows to generate field / Real User Monitoring performance reports (in JSON). It integrates easily with React-Navigation. You can send these reports to an analytics dashboard of your choice. This allows you to identify a specific screen that has performance issues in production. It reminds of existing web metrics: Core Web Vitals, TTI, INP and the Vercel/Netlify/Gatsby perf dashboards...

📜 Shopify - What We Learned from Open-Sourcing FlashList: feedback on a successful open-source launch at Shopify. Marketing and planning is an important part of the success, and should not be neglected. See also my launch of Docusaurus 2.0.
📜 How to build a React Native app 5x faster with Nitro: Nitro is a tool (paid, in preview) that allows to significantly reduce React-Native CI build times when only the JS code has changed.
📜 React Native in 2022 and Beyond
📜 How react-native became performant as native with the new architecture
🐦 setNativeProps is back on Fabric?
🎨 VisionCamera Frame Processor + Skia - Censor faces demo
📦 React-Native 0.71.0-rc.2
📦 React Native Windows 0.69.14

🧑‍💻 Jobs

🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

🧑‍💼 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.

💡 How to publish an offer?