This Week In React #104: Zag, Next.js, Remix, Ultra, ClickToComponent, Tilg, Component Party, Expo, Skia, TypeScript...

Hi everyone!

Lots of links this week!

The newsletter is late due to Twitter technical issues on the Twitter thread. Hopefully I was able to publish it now. I’d really appreciate a retweet 🙏 the issues didn’t help giving it a good start.

Great news for Next.js: a router upgrade has just been announced!

React-Native is also in the spotlight this week, with 0.69 in RC, Expo SDK 45 and React-Native-Skia 👌

⚠️ There will be no edition for the next 2 weeks. Next one will be May 24th.

🙏 Support the newsletter:

New very practical lib, which allows to easily open the source file of a React component, with a simple Option + Click on the interface. Supports CRA, Next.js, Vite… Only works with VS Code, but other IDEs could be supported, like Intellij.

Zag is a collection of primitive components based on state machines. This makes it possible to decouple the logic from the framework, and to offer a binding for React, Vue, Solid… This new solution will allow the React Chakra UI lib to be adapted more easily to other frameworks, while sharing a lot more behavior code.

Jack has worked at Google on Chrome DevTools for 2 years. Since then, he no longer uses React, and shares his feedback on his transition to standardized web APIs that do not require dependencies: forms, custom elements…

Kristofer migrated his personal site from Next.js to Remix, for fun. He gives his feedback, and shares the impact on the Lighthouse score. He lists the main changes he had to make: Chakra integration, Link component, routing, data fetching, metadata…

Feedback on the use of Incremental Static Regeneration from Next.js to reduce build times for documentation sites at HashiCorp. The new “on-demand ISR” mode makes it possible to invalidate the Next.js cache and therefore to give immediate feedback when an update is published.

💡 How to sponsor this newsletter

Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.

App.js Conf 2022 - June 8-10 in Kraków

After two long years, App.js Conf is coming back as an in-person event! Meet the creators of React Native & Expo, learn from the best and simply have fun with other devs from all around the world! Our line-up is full of mobile development professionals ready to share their knowledge. See our amazing speakers here! 

In addition to the two-day conference, we also prepared full-day practical workshops! There are still some tickets left for two of our workshops:

You can now book the workshop tickets with a 20% exclusive discount for This Week in React subscribers! Use the code ThisWeekinReact20 or follow this link to book your spot. 

PS: I’m going there this year 😉

The new SDK Expo goes into beta for a week. Some cool new stuff:

Skia is Google’s 2D engine, and you most certainly use it: Chrome, Flutter, Android… Shopify supports the development of React-Native-Skia to provide graphics/2D primitives missing from React-Native, and not be limited when implementing a complex design. The lib offers an expressive declarative API, but also an imperative low-level Flutter-compatible API, which could help with web support via React-Native-Web and CanvasKit.

New work-in-progress tool that translates your TypeScript errors into human language, easy to understand, with additional explanations (source). It can even integrate with your IDE (VS Code extension).

Brings up a problem that I never 😅: if you have a type-guard based on an object attribute, and you add a 2nd attribute, your type-guard becomes stale but TypeScript still compiles.