This Week In React #126: Perf, Progressive Enhancement, Remix, Storybook, React-Native, FlashList, Nitro, TC39...
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!
💡 Subscribe to the official newsletter to receive an email every week!
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
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?
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.
📜 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.
📜 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.
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!
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.
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.
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.
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!
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.
Advanced web font optimization techniques: explains well how to optimize your fonts: reduce the size, avoid layout shifts and adjust the vertical alignment.
For even more fun, it's all there!
Did you find this article valuable?
Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!