This Week In React #107: Plasmo, Panapasi, Fastify-DX, Remix, Stable, useInsertionEffect, JSI, Vite, Angular, Safari…

Hello everybody!

Remix, TanStack, Chakra, Mitosis, Panapasi, Fastify-DX… What have they got in widespread?

They’re turning into framework-agnostic! It is clearly a rising development!

I arrived in Krakow for the App.js conf. Hope you convey again some nice React-Native content material for subsequent week 😄

🙏 Help the publication:

For those who like this article, subscribe in precedence there:

React

Plasmo – Like Subsequent.js for browser extensions!

A brand new framework centered on the creation of browser extensions, primarily based on React and TypeScript. Open-source, free core, which presents paid CI/CD cloud service.

Panapasi – The Common UI Library

We see increasingly more UI libs that need to provide a local cross-framework assist (see Chakra, TanStack libs…). Panapasi is to my data the primary venture of its sort primarily based on Mitosis, compiling a JSX Lite dialect to the goal frameworks.

Fastify DX for React

New fullstack framework below growth, primarily based on Fastify and Vite. Agnostic: could be tailored to a number of frameworks (React, Vue, Stable…). The React integration goals to be a light-weight different to Subsequent.js and Remix, primarily based on React-Router and Valtio.

Changing a React Element to SolidJS

Changing a pagination element from React to Stable. Lots of JSX code could be taken as is, however the hooks must be tailored somewhat. Stable represents an actual innovation: the code seems loads like React in the long run (with out dependency array 😏) however the execution mannequin is reactive.

Redux Toolkit’s new listener middleware vs. Redux-Saga

Good aspect by aspect comparability of the brand new RTK Listener system vs Redux Saga. Compares the implementation of many use-cases. RTK Listener looks like a superb light-weight different to Redux-Saga, with a comparatively low studying curve. A great useful resource to decide on one or the opposite, or to plan a migration.

React 18 useEffect Double Name for APIs: Emergency Repair

Jack provides 6 doable options to keep away from the double question drawback with React 18’s StrictMode. Utilizing a lib like React-Question or RTK-Question (hmmm, TanStack Question 😏) appears the simplest.

Extras:

💸 Sponsors

💡  sponsor this article

Axiom – Zero-Config Observability for Vercel

Axiom lets you monitor the well being and efficiency of your Vercel deployments by ingesting all of your request, operate, and internet vitals knowledge.

Use Axiom’s pre-built dashboard for an summary throughout all of your Vercel logs and vitals, drill all the way down to particular initiatives and deployments, and get perception on how capabilities are performing with a single click on. 

PS: I take advantage of it myself to watch the publication signups 😉

Meteor’s Greatest On-line Occasion: Trying For Audio system! ☄️

The Meteor Influence convention is coming again this yr and might be going down on October thirteenth and 14th!

For those who’re new to Meteor, it’s is an open-source framework for seamlessly constructing and deploying Internet, Cell, and Desktop functions in Javascript.

We anticipate this yr’s occasion to be the most important and the finest Meteor Influence convention ever!

We at the moment are searching for audio system who’re all in favour of taking part within the convention.

You’ll be able to submit your speak proposal by clicking right here. We hope to see you in October!

React-Native

React Native JSI/TurboModules pitfalls

Oscar has important JSI exprience: he’s the creator of React-Native packages, and a Youtube playlist devoted to JSI. He provides us attention-grabbing suggestions on the usage of varied languages ​​for the native aspect, or on the issue to benchmark appropriately JSI in comparison with the previous bridge structure.

Extras:

Different

WebContainers at the moment are supported in Firefox

This StackBlitz’s innovation means that you can run Node.js code straight within the browser, together with React frameworks like Subsequent.js, Remix, Docusaurus… It has simply taken a giant leap ahead with this new Firefox assist (along with Chrome).

Extras: