Skip to main content

📨 #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...

· 6 min read
Sébastien Lorber
Sébastien Lorber
Newsletter Editor - Docusaurus maintainer

This Week In React #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...

Hello everyone!

Another week with a lot of cool releases, like Reassure, FlashList or Bun 🤯

Also 2 interactive articles👌

Towards the end of July, I'll switch to a bi-monthly rhythm. That's going to allow me to evolve the format of this newsletter a bit.

I often forget to mention it here, but I keep an Indie Hacker page up to date: I report monthly on this newsletter with all my numbers: growth, sponsorship etc...

🙏 Support the newsletter:

React​

Reassure

Reassure is a new React performance test library. Already presented previously, it has now been open-sourced by Callstack. It allows to post a report in a pull-request when perf regressions are detected. Example: a component that re-renders more slowly, or more often than before. For the moment only React-Native is supported, but web support will come very soon.

How to animate multiplayer cursors

A great interactive article that proposes to animate the mouse cursor on several browsers in real time. This is a more complicated problem than it seems. Each approach is illustrated with a React implementation and presents different tradeoffs: CSS transitions, spring, splines...

How to Use Next.js Middleware

Interactive article from the same author, presenting many middleware use cases. Already published here, it has just been updated following the official release of Next.js 12.2 which includes some breaking changes.

10 Years Of Meteor

Sacha Grief (co-author of Discover Meteor, and also of the State of JS, CSS surveys...) takes a look back at 10 years of his personal history with the framework. Meteor has lost popularity, but remains used and has greatly influenced our frontend ecosystem.

The mystery of React Element, children, parents and re-renders

Nadia highlights some React behaviors that can be surprising or even counter-intuitive, and explains in which case a parent's re-render will trigger a child's re-render on various edge-cases.

Storybook Community Showcase #2

Summary of the latest news from the Storybook community: Component Encyclopedia, Figma plugin, Story Explorer, and various addons: Variants, CSS variables, Recoil...

The new wave of React state management

Presents the different problems that state management libs have to solve, and compares some of them. Pre/post Redux retrospective. Complete article but quite long: not easy to read.

Extras:

💸 Sponsors​

💡 How to sponsor this newsletter

TechTree - Introducing This Week in React Bounty Board

TechTree is building the first social-economic platform for developers - a place to help you unlock the real value of your knowledge and network!

The first major feature on TechTree is Bounties, a tool to help you earn money by referring your friends to open roles at top VC backed tech startups or find a job that might be right for you!

To help show you around, I have gone ahead and created my very own Bounty board - a selection of remote, React related roles for you to apply to or refer your network to. There has been over $300k worth of Bounties claimed on TechTree so far!

Looking to hire React developers? You can post Bounties of your own to be featured on my Bounty board! Read more and get started here.

Storetasker: Freelance Shopify Devs network

Hey! This is Tim from Storetasker. We run the best Shopify dev freelance network. I would love for you to apply if you enjoy building Shopify sites or are excited about leveraging Shopify's cutting-edge React framework for building custom storefronts: Hydrogen.

Accepted devs on the network work on a freelance basis, and we present them with great opportunities to work on some of the best Shopify brands (Alo Yoga, Chubbies, JUDY & many many more).

The great thing about Storetasker is that devs aren't in competition with each other - they just pick up the jobs that match their interests. Beyond that - it's a very tight-knit community.

Feel free to apply directly via this link to join.

React-Native​

FlashList - Fast & Performant React Native List

Shopify has just released FlashList, its alternative to FlatList to solve performance issues when scrolling and avoid showing empty cells. The goal is to keep 60fps even on low-end Android devices, without complicating the implementation. The library reuses already rendered cells: you'll have to adapt your use of React key to let it take over.

React-Native-Compat-Table

Lists the API support of each React-Native runtime (JSC, V8, Android...) in a comprehensive way. The author also explains why React Native recommends TS config lib: "es2017"

Extras:

Other​

Bun - an incredibly fast all-in-one JavaScript runtime.

A new JavaScript runtime that competes directly with Node.js and Deno on performance, based on JSC (not v8) and written in Zig. A complete toolchain with a bundler, transpiler, package manager and even test runner. We already talked about the Bun bundler last year but the scope has expanded to something larger, and v0.1 has just been released.

Extras:


Don't miss the next email!