This Week In React #112: JSX Expressions, Storybook, Remix, Actionless reducers, Atomic Forms, NPM trends, Expo, RN Keyboard, Bun...
React
Statements Vs. Expressions
Josh Comeau is preparing his next course on React. He proposes to go back to the basics of JavaScript, and thus allow a better understanding of how JSX works, which only works with expressions. On the same topic, I would love to see the do-expressions proposal progress 😇.
How to build connected components in Storybook
An official Storybook article that explains well all you can do with decorators: add a layout, global providers, mock a Redux store or requests... It can help to add "connected" components to your Storybook that otherwise can't be rendered due to context dependencies.
How I Estimate NPM Package Market Share (and how Redux usage compares to other libraries)
Mark Erikson (Redux) explains how he analyzes npm package usage trends, based on various more or less reliable tools. Download stats are often related to CI builds. He uses React state managers as an example. He now estimates Redux / React usage at 33% (previously 45-50%)
Actionless and Stateless Reducers in React
useReducer() is not reserved for complex cases: it can also be used for very simple state machines, like changing a boolean from false to true.
Extras:
📜 Next.js: open external links in a New Tab: it can be interesting to create your own Link abstraction on top of the underlying framework to add extra behavior
📜 The Unlocked Possibilities of the :has() Selector: CSS feature. Interesting comparison with React rendering at the end.
📜 Atomic Forms in React: presents a bit Jotai-Form and the difference with more traditional approaches like Formik.
📜 Create a simple cookie with Remix: shows that the use of cookie in Remix is relatively simple, and close to the HTTP protocol
🧑🎨 Remix + Bun demo
🧑🎨 React-on-the-edge: Vercel demo that shows how to use React SSR (without Next.js) with the Edge Runtime. With or without streaming.
🐦 Remix loader type inference: PR merged to facilitate typesafe usage of the useLoaderData() hook 👌
🐦 Bun + React SSR: significant performance gains
📦 RemixBlocks: I find the idea interesting: nested routes Remix are full-stack which makes them a good candidate for copy/paste, quite similar to Tailwind.
📦 react-obsidian: dependency injection for React
💸 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.
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.
React-Native
📜 Expo: sunsetting the CLI Web UI: the CLI web UI will disappear. Not a big deal, it was limited anyway compared to the CLI features.
🧑🎨 useAnimatedSentor travel cards parallax: demo with a very nice visual result 😎
📦 react-native-keyboard-controller 1.0: synchronizes keyboard visibility with animated values 👌
📦 vision-camera-plugin-builder: reduces the boilerplate for the creation of a vision camera plugin.
🎥 It's After Effects, but in Remotion: William Candillon shows how React-Native-Skia runs on the web with Remotion. You can follow and apply the After Effect tutorials, not written for us at first.
