This Week In React #103: Contentlayer, Remotion 3, Stale Closure, Cross-platform, Jest 28, Hydration, Netlify Edge Functions...
Tags: react, reactnative, javascript, typescript
Published: 2022-04-27 09:20:28

---
series: This Week In React
---
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:**

-   😘 **Recommend it to your friends**: it really helps!
-   💸 [**Sponsor This Week In React**](https://gist.github.com/slorber/cb732fb5d0a002c4d73236a9baeba7bb?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   😍 [**Write testimonials on Twitter**](https://twitter.com/sebastienlorber/timelines/1448942785814466561?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   🧵 [**Retweet the latest Twitter thread**](https://slo.im/thread?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   📨 Reply to this [**email**](mailto:lorber.sebastien@gmail.com?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): feedback is welcome
-   👥 Follow on [**LinkedIn**](https://www.linkedin.com/company/this-week-in-react/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

**If you like this newsletter, subscribe in priority there**:

-   🇬🇧 [ThisWeekInReact.com](https://thisweekinreact.com/)
-   🇫🇷 [ReactHebdo.fr](https://reacthebdo.fr/)


[![](https://user-images.githubusercontent.com/749374/153181021-8fdb0ece-270a-4cf2-980b-4557d04316ad.png)](https://thisweekinreact.com)

---



## React

[**Contentlayer: Content Made Easy for Developers (beta)**](https://www.contentlayer.dev/blog/beta?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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](https://www.contentlayer.dev/docs/environments/nextjs?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) reduces the amount of glue code. I recommend watching the intro [intro video](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=58Pj4a4Us7A) (5min) to understand how it works in a Next.js context. A new project by [Johannes Schickling](https://twitter.com/schickling?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), also creator of [Prisma](https://github.com/prisma/prisma?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), also working on the glue between code and DB.

[**Remotion 3.0**](https://www.remotion.dev/blog/3-0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=GN2jkJphR5M)) and the main new feature is the new support for serverless rendering on [AWS Lambda](https://www.remotion.dev/lambda?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), which allows you to scale, reduce costs, and produce videos much faster!

[**Hooks, Dependencies and Stale Closures**](https://tkdodo.eu/blog/hooks-dependencies-and-stale-closures?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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!

[**The challenges of rendering an OpenLayers map in a popup through React**](https://dev.to/noriste/the-challenges-of-rendering-an-openlayers-map-in-a-popup-through-react-2elh?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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:**

-   📜 [File-based routing with React Location --- Nested layouts](https://omarelhawary.me/blog/file-based-routing-with-react-location-nested-layouts?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): the creator of [Generouted](https://github.com/oedotme/generouted?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) continues his series on implementing a home-made file-based routing. Here he shows how to implement nested layouts (inspired by Remix) based on Vite and React-Location.
-   📜 [React Component Composition Explained](https://felixgerschau.com/react-component-composition/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): composition can help solve drilling props and improve performance.
-   📜 [Upgrading to React 18 with TypeScript](https://blog.logrocket.com/upgrading-react-18-typescript/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): summary of TypeScript breaking changes coming with React 18, and how to automate the migration via codemod.
-   📜 [Flexible Design System Components With "as/is" Props](https://www.lloydatkinson.net/posts/2022/design-system-component-as-is-props/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): useful technique to use a component with different HTML tags depending on the context: `<span>`, `<h1>`...
-   📜 [Introduction to React v18 Suspense and Render-as-You-Fetch approach](https://medium.com/jspoint/introduction-to-react-v18-suspense-and-render-as-you-fetch-approach-1b259551a4c0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): using React 18 new features to avoid waterfalls.
-   📜 [Creating a Rich Text Editor using Rust and React](https://fiberplane.dev/blog/creating-a-rich-text-editor-using-rust-and-react/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📜 [Create powerful and flexible forms with React Hook Form](https://daily.dev/blog/create-powerful-and-flexible-forms-with-react-hook-form?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📜 [Exploring React Suspense with React Freeze](https://blog.logrocket.com/exploring-react-suspense-react-freeze/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   💡 [Gatsby RFC: GraphQL TypeScript Generation](https://github.com/gatsbyjs/gatsby/discussions/35420?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🐦 [`next/link` will no longer require `<a>` as a child](https://twitter.com/timneutkens/status/1518595962322792448?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): looks like a nice quality of life improvement 😉
-   🐦 [React + Qwik](https://twitter.com/Steve8708/status/1517953640673124352?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🧵 [Sebastian Markbåge: "Hydration in React was originally not built for SSR"](https://twitter.com/sebmarkbage/status/1516907614566854659?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): there's been interesting hydration discussions this week, probably in reaction to this [Misko Hevery article](https://twitter.com/mhevery/status/1516844814792224770?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) (creator of Qwik/Angular)
-   🧵 [Alex Russell on CSS-in-JS](https://twitter.com/slightlylate/status/1517173350467993600?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): fair criticism of runtime-based CSS-in-JS libs
-   📦 [Create-React-App Redux Template v2](https://github.com/reduxjs/cra-template-redux/releases/tag/v2.0.0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): update React 18
-   📦 [Jest-Preview](https://github.com/nvh95/jest-preview?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): new solution that integrates with React-Testing-Library to visually see your tests run and debug them more easily.
-   📦 [Rive-React](https://github.com/rive-app/rive-react?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): React bindings for the [Rive](https://rive.app/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) animation platform
-   📦 [Jotai-form](https://twitter.com/dai_shi/status/1518562466627821570?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📦 [MDX-to-MD](https://github.com/souporserious/mdx-to-md?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🎥 [The Official Beginner's Guide to XState in React](https://www.youtube.com/watch?list=PLvWgkXBB3dd4ocSi17y1JmMmz7S5cV8vI&utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=_5dAlGaqhck)
-   🎥 [React for the Haters in 100 Seconds](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=HyWYpM_S-2c)
-   🎥 [Redux in 100 Seconds](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=_shA5Xwe8_4)


## React-Native

[**Migrating React And Native Apps To React Native**](https://www.callstack.com/blog/migration-to-react-native?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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.

[**Writing cross-platform components for web and React Native**](https://blog.sapegin.me/all/react-native-components/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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:**

-   📜 [Use Storybook with Nx React Native](https://blog.nrwl.io/use-storybook-with-nx-react-native-2ddd8c010eda?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🎙️ [React-Native-Radio 232 - Flutter is better than React Native...in all the ways that don't matter](https://reactnativeradio.com/episodes/rnr-232-flutter-is-better-than-react-nativein-all-the-ways-that-dont-matter?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🎙️ [The React Native Show Podcast: Coffee Talk #1 - React v18.0 & React Native 0.68](https://twitter.com/callstackio/status/1517517170384719873?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   👥 [React-Native EU](https://www.react-native.eu/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): [Call-For-Papier](https://docs.google.com/forms/d/e/1FAIpQLSdknyrQo6OVw-YgvExtFOH0xYaejKSf_R29ltQp2ghXXgWMYg/viewform?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) open until end of Mai
-   📦 [React-Native V8 1.0](https://github.com/Kudo/react-native-v8/releases/tag/v1.0.0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

## Other

[**Jest 28: Shedding weight and improving compatibility**](https://jestjs.io/blog/2022/04/25/jest-28?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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](https://github.com/jest-community/jest-runner-tsd?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): for testing TypeScript types
-   [jest-light-runner](https://github.com/nicolo-ribaudo/jest-light-runner?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): 2x faster on Babel codebase

[**Building a JavaScript Bundler**](https://cpojer.net/posts/building-a-javascript-bundler?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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.

[**Netlify Edge Functions (beta)**](https://www.netlify.com/blog/announcing-serverless-compute-with-edge-functions?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

After a failed attempt (Edge Handlers), Netlify releases a new serverless @ Edge offer with its Edge Functions in beta, based on the [Deno Deploy](https://deno.com/blog/netlify-edge-functions-on-deno-deploy?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) 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...

[**Hydration is Pure Overhead**](https://www.builder.io/blog/hydration-is-pure-overhead?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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:**

-   [Marko: Compiling Fine-Grained Reactivity](https://dev.to/ryansolid/marko-compiling-fine-grained-reactivity-4lk4?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Marko for Sites, Solid for Apps](https://dev.to/this-is-learning/marko-for-sites-solid-for-apps-2c7d?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Progressive Enhancement and HTML Forms: use FormData](https://www.bram.us/2022/04/22/progressive-enhancement-and-html-forms-use-formdata/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Island Architecture](https://mainawycliffe.dev/blog/island-architecture/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [V8 - Faster initialization of instances with new class features](https://v8.dev/blog/faster-class-features?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Learn PWA](https://web.dev/learn/pwa/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Div Riots: Our experience with Astro](https://divriots.com/blog/our-experience-with-astro?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [The Future of CSS: CSS Toggles](https://www.bram.us/2022/04/20/the-future-of-css-css-toggles/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [TypeScript and Set Theory](https://ivov.dev/notes/typescript-and-set-theory?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [JSDB: Use javascript as your database](https://javascriptdb.com/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [SvelteKit can now run on Vercel Edge Functions](https://twitter.com/leeerob/status/1517627769924034565?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [How to Use Next.js Middleware on Netlify](https://www.netlify.com/blog/next.js-middleware-on-netlify?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Vitest VS Code Extension](https://twitter.com/vitest_dev/status/1517896780016676865?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Nx 14.0](https://github.com/nrwl/nx/releases/tag/14.0.0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Deno 1.21](https://deno.com/blog/v1.21?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Parcel 2.5](https://twitter.com/parceljs/status/1517170101799337985?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [ESLint 8.14](https://eslint.org/blog/2022/04/eslint-v8.14.0-released?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Vitest 0.10](https://twitter.com/vitest_dev/status/1518600493614120965?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

 <img width="687" alt="CleanShot 2022-04-27 at 11 19 35@2x" src="https://user-images.githubusercontent.com/749374/165486018-464fd017-cc65-45f5-985d-27294896cb9d.png">