This Week In React

By Sébastien Lorber

This Week In React #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...

#103・
5.13K

subscribers

33

issues

Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that This Week In React will receive your email address.

This Week In React #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...
By Sébastien Lorber • Issue #103 • View online
Hi everyone!
Great releases this week: Contentlayer, Remotion 3, Jest 28, Netlify Edge Functions…
A good diversity of React articles, including 2 related to cross-platform, a subject that interests me very much.
🙏 Support the newsletter:

React
Contentlayer is a new system that offers to manage the glue between your content (Markdown, CMS, Notion…) and your code. You define a schema, and it will validate/compile your content and efficiently generate a .contentlayer folder with TypesScript types, and the content ready to be imported directly into your app. This seems to improve build performance significantly (up to x2 even even with cold caches). The beta has an official Next.js integration reduces the amount of glue code. I recommend watching the intro intro video (5min) to understand how it works in a Next.js context. A new project by Johannes Schickling, also creator of Prisma, also working on the glue between code and DB.
Remotion allows you to create videos programmatically, with React (web) code and data/props. After 10 months of development, v3.0 has just been released (trailer) and the main new feature is the new support for serverless rendering on AWS Lambda, which allows you to scale, reduce costs, and produce videos much faster!
Interactive article to help fully understand the stale closure problem in React. If you use memoization and do not respect the ESLint exhaustive-deps rule, you risk introducing this type of problem in your codebase, and it is not always easy to debug!
An interesting feedback on rendering a React app in several windows via portals. There are advantages (a single state to control all the windows) but also some challenges to solve.
Extras:
💸 Sponsors
App.js Conf 2022 - June 8-10 in Kraków
After two long years, App.js Conf is coming back as an in-person event! Meet the creators of React Native & Expo, learn from the best and simply have fun with other devs from all around the world! Our line-up is full of mobile development professionals ready to share their knowledge. See our amazing speakers here! 
In addition to the two-day conference, we also prepared full-day practical workshops! There are still some tickets left for two of our workshops:
You can now book the workshop tickets with a 20% exclusive discount for This Week in React subscribers! Use the code ThisWeekinReact20 or follow this link to book your spot. 
PS: I’m going there this year 😉
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.
React-Native
Callstack engineers explain how to adopt React-Native for an existing app, with 2 different approaches: greenfield (full rewrite) and brownfield (incremental migration). Also evokes how to port a web application to React-Native.
Artem gives some ideas for cross-platform web/mobile development. He suggests using primitive components, and taking a web-first approach for DX reasons: developing in the browser and testing with Cypress, then verifying that the mobile app works.
Extras:
Partners
  • Start React Native: learn everything about gestures and animations with William Candillon
  • Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!
  • TypeScript Weekly: the best TypeScript links every week, right in your inbox
  • ES.next News: learn about the latest in JavaScript and cross-platform tools
  • Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
  • G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
  • Infinite Red: US React-Native experts making your idea a reality
  • Software Mansion: the co-creators of React Native and the technological core of many tech companies
Other
Lots of cool things in this release! My highlights:
  • Sharding support to parallelize test execution
  • Full support for package "exports"
  • GitHub Actions Reporter looks very convenient
  • ESM support still blocked
  • jest-runner-tsd: for testing TypeScript types
  • jest-light-runner: 2x faster on Babel codebase
Christoph Nakazawa explains how to create a JavaScript bundler, based on some existing Jest packages. Reading JavaScript files, creating the dependency graph, the bundle runtime, final bundle assembly… A technical reading that greatly demystifies the internal workings of a simple bundler.
After a failed attempt (Edge Handlers), Netlify releases a new serverless @ Edge offer with its Edge Functions in beta, based on the Deno Deploy infrastructure, and thus more compatible with web standard APIs. This allows in particular to run React meta-frameworks using server-side code more optimally: Remix, Next.js (only middleware for now), Hydrogen, Server Components, Astro…
The creator of Qwik/Angular continues to question the hydration model of our server-side rendered SPAs, and pushes to adopt another more efficient model, based on “resumability”.
Extras:
Did you enjoy this issue?
Sébastien Lorber

📨 For React devs ⚛️ I filter out the noise 🔊 You save time ⏱️

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue