This Week In React

Share this post

This Week In React 113

substack.thisweekinreact.com

This Week In React 113

React source code, SOLID, Remix, Docusaurus, FP, Remotion, Rapier, Hermes, RN at Airbnb...

Sébastien Lorber
Jul 19, 2022
Share this post

This Week In React 113

substack.thisweekinreact.com

React

Reading Source Code: React

Alex reads the React source code and comments on several parts, taking as an entry point the mount of a React application. Interesting details about the use of prototypes, JSX, and the interaction of the (agnostic) reconciler with the DOM renderer.

Can We All Just Admit React Hooks Were a Bad Idea?

Amy argues that React hooks do not respect SOLID architecture principles. I don't really agree, but recognize that most of the examples found on the internet are simplified and don't necessarily highlight a good architecture.

Applying SOLID principles in React

Almost a direct answer to the above article, even if the application of SOLID is more widely covered here (components + hooks). Note: don't hesitate to use the React context for dependency injection.

Extras:

  • 📜 Avoid anonymous components with displayName: sometimes React can't infer a good name for your components, which complicates the use of devtools (Context, memo, forwardRef, HOC)

  • 📜 Why Remix is not a React framework but a full stack web framework: a well-written overview of the differences between Remix and other frameworks. Remix is full-stack and framework-agnostic.

  • 📜 Functional programming is finally going mainstream: GitHub highlights the popularization of functional programming, in part thanks to React, Redux and hooks. I personally switched career from Scala to React after reading David Nolen's famous post. Didn't even like JS before 2014 😅

  • 📜 Why Docusaurus is a powerful documentation framework: 1Password explains why Docusaurus is a good solution for their developer documentation portal. Touch various advanced topics, including site customizations, remark plugins to extend MDX/Markdown...

  • 📜 Store data in a cookie with sessions and Remix: creation of a visit counter cookie

  • 📖 Remix Deferred: new API under development that gives fine control over data loading tradeoffs on initial page load. Optimize for Time-to-first-byte or Cumulative Layout Shift.

  • 📖 Next.js accessibility doc improvements

  • 🐦 New Preact VDOM state model

  • 🐦 Remix + React 18 startTransition + time-sliced hydration: Ryan Florence sharing a controversial tip. Starts interesting discussions about hydration (Ryan Carniato, Andrew Clark...)

  • 📦 pmndrs/react-three-rapier: integrates react-three-fiber with Rapier (physics engine)

  • 📦 Remotion 3.1: many new features! Gifs, Tailwind CSS, springs with duration, OffthreadVideo...

  • 📦 Remix 1.6.5: loader + useLoaderData TypeScript inference👌

  • 📦 Framer Motion 6.5: scroll animations

  • 📦 Zustand 4.0.0-rc.2: ready for production

  • 📦 Redwood 2.1

💸 Sponsors

💡 How to sponsor this newsletter

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.

CSS Weekly Newsletter

Stay up-to-date with the latest trends in CSS by getting only relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and sign up now.   

React-Native

Hermes as the Default

The JS Hermes engine is an alternative to JSC/V8. It can help your app to start faster via a pre-compilation in bytecode. With React-Native 0.70 (now in release candidate), Hermes is enabled by default. Michael shares various benchmarks from the open-source app Mattermost. The Hermes distribution mode has changed to avoid ABI incompatibility issues. Missing Intl APIs have been added on iOS. Upcoming support for BigInt and WeakRef.

What working at Airbnb during its React Native era taught me about web3

Devin goes over the history of React-Native at Airbnb and the very nuanced decision to sunset it He makes the interesting parallel with web3. In the long term, technology potential wins over the pain of early adopters.

Extras:

  • 📜 Ionic - Announcing Portals for React Native: allows an integration of WebView Ionic experiences in a React-Native app. Paid product.

  • 🎙️ React-Native-Radio #242 - Inspecting React Native 0.69

  • 🎙️ The React Native Show #14 - React Native Paper v.5

  • 📦 Vision Camera 2.14: can now chain frame processors

  • 📦 expo vscode 0.8: JSON config autocomplete 👍

  • 📦 expo-music-picker

  • 📦 react-native-iconic

  • 🧑‍🎨 React-Native-Skia + Expo web demo

  • 🧑‍🎨 Instagram iOS page transitions demo

Other

Vite 3

Vite quickly became a reference in the frontend ecosystem. Today, it is a very good alternative to Create-React-App, with a much faster DX, and some React meta-frameworks are also using it (Storybook, Hydrogen...). v3 comes with a lot of changes, a new doc, starters for various frameworks (including React), improvements on global imports, a new doc... See also the ViteConf conference in October.

Extras:

  • The Cost of Consistency in UI Frameworks

  • Node.js 18.6 - Custom ESM loaders: Who, what, when, where, why, how

  • A New Pattern For The Jamstack: Segmented Rendering

  • Event-Driven JavaScript Development

  • Chrome Dev Insider: The CSS and UI edition

  • Safari Technology Preview 149

  • NestJS v9

  • Parcel CSS 1.12

Twitter avatar for @jordienr
Jordi ☕️🧊 @jordienr
developers will spend $300 on a mechanic keyboard that makes a specific sound and then use it with $400 noise cancelling headphones
8:49 PM ∙ Jan 18, 2023
Share this post

This Week In React 113

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing