Sebastien LorberHello 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:
- 😘 Recommend it to your friends: it really helps!
- 💸 Sponsor This Week In React
- 😍 Write testimonials on Twitter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
- 👥 Follow on LinkedIn
If you like this newsletter, subscribe in priority there:
React
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...
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.
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
- 🐦 Remix + Svelte
- 🐦 Astro Preact compat option
- 🎥 A Fresh new web framework is out
- 📦 FramerMotion 6.4: new hook useInView()
- 📦 TanStack Table v8: new React-Table version is now framework-agnostic and also supports Svelte, Solid, Vue
- 📦 storybook-addon-docusaurus
💸 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.
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.
- 🐦 FlatList vs FlashList perf comparison
- 🐦 React-Native vs Flutter diagram
- 🐦 Webpack Module Federation + React Native
- 🎙️ RNR 241 - Redux Toolkit vs MobX-State-Tree Showdown
- 🎥 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...
- New to the web platform in June
- Color.js: A library that takes color seriously
- Faster page loads using server think-time with Early Hints
- The end of Internet Explorer
- TransformStream is now supported cross-browser
- wasmbuild - Using Rust in Deno and Web Apps
- CSS Cascade Layers -- There's a Polyfill for That!
- CSS - Breaking Out of a Central Wrapper
- Vue 2.7 "Naruto"
