This Week In React #99: Remix, Next.js, Redux, Memoization, Storybook, Ladle, Wix, Shopify, React-Native, CodeSandbox, Prettier, Deno...

Hi everyone!

A lot of great articles this week, on Remix or Next.js, or even from great companies like Uber, Wix or Shopify.

I particularly like the article on preemptive memoization, and even planned to write a very similar article 😅.

Ladle is a modern alternative to Storybook, easy to adopt and based on Vite and ESM. It's clearly a trend: see also Vitest modernizing Jest.

React-Native 0.68 is coming next week, with a switch to enable Fabric and the new architecture! 🤯

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

🇬🇧 ThisWeekInReact.com
🇫🇷 ReactHebdo.fr

React

Ladle - A drop-in alternative to Storybook

Ladle is a project from an Uber engineer who loves Storybook but still sees various performance issues within his company: build time, startup time, Time-To-Interactive... So he created a much faster alternative , based on Vite and ES modules, and compatible with the Component Story Format to make adoption easy (demo).

Preemptive Memoization In React Is Probably Not Evil

A very interesting and well-documented article on the stability of objects and callbacks. Despite the fact that the use of useMemo may look like a premature optimization, Zhenghao recommends stabilizing identities as much as possible, at least for libs and custom hooks. We look forward to React-Forget and Records & Tuples which could greatly simplify our lives.

Remix Stacks & Remix v1.3

The Remix CLI now allows you to initialize a project with a given stack. Remix offers 3 built-in stacks to get started very fast (DB, auth, host, tests...), and it is possible to create your own stack (for your company projects for example). On the 3 stacks available, the difference is mainly on hosting or persistence, and we find in common base: Tailwind, TypeScript, Prettier, ESLint, Cypress, MSW, Docker, Vitest, Testing Library.

I find it good to provide starters to get started quickly, but I have mixed feelings about the "template" approach, I prefer the "company-scripts" approach (like CRA) that Kent previously advocated for, to reduce the maintenance of existing projects over time.

Upgrading Next.js for instant performance improvements

Vercel recently upgraded a demo app (Virtual Reality Store) from Next.js v8 to v12. Lydia takes the opportunity to list the many improvements that come with the latest versions, and that you get with a minimal upgrade effort. A nice overview of new features that you might have missed.

How Wix Applied Multi-threading to Node.js and Cut Thousands of SSR Pods and Money

Feedback from Wix explaining how they optimized their platform running React Server-Side-Rendering with high CPU demand. They used the new Node.js API 14 worker_threads (allows memory sharing unlike child_process) and got very good results. It's more about Node.js but still find it interesting for those that run self-hosted React SSR pipelines.

Shopify: Creating a React Library for Consistent Data Visualization

Feedback from Shopify reporting consistency issues on its data-visualizations. Solution: the creation of the Polaris Viz lib, that will be open-sourced soon. They explain in particular the use of the React context to create default themes and the possibility of creating variants via partial overrides.

Idiomatic Redux: Designing the Redux Toolkit Listener Middleware

Mark Erikson does a retrospective on the design of the new Redux Toolkit 1.8 Listener Middleware API, which spans over 2 years, with many iterations. They managed to cover many Redux-Saga/Observable use cases with a relatively simple API. I like the concept of await condition(predicate).

Extras:

📜 Nexus --- a Component Tree Visualizer for Next.js: extension VSCode
📜 Using SVG sprites in a React app
📜 Implementing advanced usePrevious hook with React useRef
📜 Remix - Full Context Review
📜 Remix vs Next.js
📜 Storybook Community Showcase #1
📖 Partydown + Gatsby: integration doc
📖 Dan Abramov annonced 3 new doc pages on the beta site: useReducer, useContext, createContext
📦 React-Runner v1: stable release for this modern alternative to React-Live permitting to create a code editor with a live preview. Similar to CodeSandbox Sandpack but without any iframe, running directly in the browser.
📦 React-Spline: to run 3D experiences created with the Spline tool. Not 100% sure what this is, but it looks like a possible alternative to Blender + React-Three-Fiber?
📦 Remix-ETag
📦 MDX v2.1

React-Native

📦 React-Native v0.68.0-rc.3: stable v0.68 planned for next week, including a switch to enable Fabric and the new architecture 🤯
📜 Using Storybook and MSW in React Native
🧑‍🎨 React-Native-Skia: shadows
🎙️ RNR 229 - Building an Expo App for Mobile and Web with Josh Justice
😢 React-Native Weekly - The End
📦 React-Native-Quick-SQLite: async callbacks support
📦 React-Native-Elements v4.0.0-rc.0

Other

CodeSandbox Projects

CodeSandbox rewrite, new cloud dev experience for projects of any size, with IDE integration (now VSCode, more to come) and even iPad support. Nice contribution workflow, seems handy for quickly collaborating or reviewing a pull-request without switching your local git branch.

Extras:

Prettier 2.6: new singleAttributePerLine option, TS 4.6 support...
Deno 1.20: significant perf improvements, TS 4.6 support, V8 upgrade...
welcome2web3.com: ironic site, demo the web3 UX 😂
Lamina: "Tailwind for shaders"
Vercel Deploy: Chrome Extension
Boa v0.14
Parcel CSS v1.7
Wave.js 2.0
Your SSR is slow & your devtools are lying to you
Debugging TypeScript using Replay Node
OpenSSL security releases require Node.js security releases
Conquering JavaScript Hydration
experiences. Web. frameworks. future. me.
Motion Developer Tools
How to write fast code
Vitest inline assertions? 🤔
hidden="until-found"
Alert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraine
Protestware is trending in open source: 4 different types and their impact
Packages with high download numbers that nobody wanted to install
CSS-Tricks is joining DigitalOcean!
In Defense of Sass
Gotchas with Git and the GitHub API
Retro-specifying fetch/performance
Making WebViews work for the Web
Why I Prefer Makefiles Over package.json Scripts

This Week In React #99: Remix, Next.js, Redux, Memoization, Storybook, Ladle, Wix, Shopify, React-Native, CodeSandbox, Prettier, Deno...

Comments