This Week In React #111: Reassure, Multiplayer Cursors, Next.js, Meteor, Storybook, TanStack, FlashList, Bun...
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:
📜 Deploy Next.js 12.2 on Netlify today: Next.js latest edge features can run on Netlify too
📜 Use Next.js 12.2 On-Demand ISR to automatically refresh stale data
📖 Thinking in Efffects: new doc page, work-in-progress
📦 FramerMotion 6.4: new hook useInView()
📦 TanStack Table v8: new React-Table version is now framework-agnostic and also supports Svelte, Solid, Vue
💸 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:
📜 What’s New in React Native 0.69 — How to Upgrade and Why it Matters
🧵 Expo 46 + web: Evan Bacon gives details about changes in web support and also confirms the ambition to replace Webpack by Metro.
🧵 React-Native vs mobile native trends: the development of native apps seems to decrease.
🎥 The React Native Avengers: GestureHandler, Reanimated, and Skia
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:
Safari Technology Preview 148: :has(), Container Queries, inert...
