DEV Community

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

Posted on • Edited on

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:

If you like this newsletter, subscribe in priority there:


React

Click To Component

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

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.

Why I don't miss React: a story about using the platform

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...

Moving from Next to Remix

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...

How HashiCorp developers iterate faster with ISR

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.

Extras:

React-Native

Expo SDK 45 beta is now available

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

  • React-Native 0.68.1: Expo upgrades to the latest version, but without enabling the Fabric renderer yet
  • redesign of Expo Go, with better integration of EAS Update and the ability to see/open branches
  • several libs migrated to JSI and/or Expo Sweet Module API
  • a brand new expo CLI (beta), that will be versioned and installed locally rather than globally
  • Expo wrapper libs are deprecated: original native libs can be used via config plugins

React Native Skia - For Us, For You, and For Fun

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.

Extras:

Other

TypeScript Error Translator

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).

Keeping TypeScript Type Guards safe and up to date

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.

Extras:

CleanShot 2022-05-04 at 10 20 38@2x

Top comments (0)