# This Week In React #90: JSX, Tinybase, Dioxus, Owl, useWorkerizedReducer, Perf, TypeScript, CSS...

Hi everyone!

A week with various content, from interesting React articles to new tools leading to some healthy FOMO 😇

Parcel CSS reusing a Rust css parser initially created for Firefox, that's really cool!

I was also happy to notice that [Node.js plainly supports Error Cause](https://twitter.com/sebastienlorber/status/1483444738506346499?utm_campaign=sebastien_lorber_newsletter&utm_medium=email&utm_source=Revue%20newsletter)!

🙏 **Support the newsletter **🙏**: **

-   😘 **Recommend it to your friends**: it really helps!
-   💸 [**Sponsorise This Week In React**](https://gist.github.com/slorber/cb732fb5d0a002c4d73236a9baeba7bb?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   😍 [**Write testimonials on Twitter**](https://twitter.com/sebastienlorber/timelines/1448942785814466561?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   **🧵 **[**Retweet the latest Twitter thread**](https://slo.im/thread?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

## React

[Good advice on JSX conditionals](https://thoughtspile.github.io/2022/01/17/jsx-conditionals/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

We like React because it's just JavaScript and we don't need to learn another templating language. But let's admin it's not always easy and there are some pitfalls to avoid 😅 This article gives a great overview.

[useWorkerizedReducer](https://github.com/surma/use-workerized-reducer?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

Surma (Google) introduces a lib to use a Service Worker to create a React reducer (possibly async). Communication is efficiant thanks to ImmerJS and transmitting patches using `postMessage`. Browser support is good, only Firefox needs a polyfill. Now let's find a good use-case for this 🤷‍♂️, anyone?

[An Inconsistent Truth: Next.js and Type Safety](https://t3.gg/blog/posts/types-and-nextjs?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

Interesting thoughts on the current limits of end-2-end typing in Next.js, focusing on `getServerSideProps` and page props. There's either too much manual boilerplate (risk of error), or a type helper `InferGetServerSidePropsType` that might give surprisingly unsafe results. Evokes a TypeScript feature much-awaited by all frameworks: the [ability to type module exports](https://github.com/microsoft/TypeScript/issues/38511?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter). Presents other solutions like Blitz, Server Components or [tRPC](https://trpc.io/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter). The last one looks quite interesting (see also the [zart](https://github.com/KATT/zart?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) boilerplate using it).

[Tinybase](https://github.com/tinyplex/tinybase?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

New reactive store for structured data (in tables, like SQL or Normalizr), with a React integration package including hooks like `useCell` for efficient, fine-grained subscriptions. Small in size, but quite featured: index, relationships, undo/redo...

**Extras:**

-   [How we migrated 541 components from Styled Components to Emotion with zero bugs](https://storybook.js.org/blog/541-components-from-styled-components-to-emotion/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): feedback from migrating the Storybook codebase from one CSS-in-JS lib to another, dogfooding their own visual regression tooling (Chromatic) as a safety net
-   [Reading Source Code - Redux](https://alexkondov.com/reading-source-code-redux/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): Alex studied the Redux codebase and uses this opportunity to discuss the legitimate usage of TypeScript overloads in `createStore`
-   [Performance Optimization for Three.js Web Animations](https://www.gatsbyjs.com/blog/performance-optimization-for-three-js-web-animations/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): useful techniques to know to efficiently integrate and lazy-load heavy React components. In this case an optional Three.js background.
-   [How to write performant React code: rules, patterns, do's and don'ts](https://www.developerway.com/posts/how-to-write-performant-react-code?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): good advice and 4 rules to take away
-   [Gatsby 4.5](https://www.gatsbyjs.com/docs/reference/release-notes/v4.5/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): also trying to type `getServerData` 😏
-   🎥 [How to Contribute to Open Source (Next.js)](https://www.youtube.com/watch?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter&v=cuoNzXFLitc) with Lee Robinson
-   [Remix-GraphQL](https://github.com/thomasheyenbrock/remix-graphql?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [Next.js RFC: Change default JS/CSS output to target modern browsers](https://github.com/vercel/next.js/discussions/33227?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)


## 💸 Sponsors

[**Stream: powerful Chat & Feeds for React & React-Native**](https://getstream.io/?utm_campaign=ThisWeekInReact_Jan2022_ReactChatApp&utm_content=Developer&utm_medium=Newsletter_Content_Ad&utm_source=ThisWeekInReact)

Stream is the maker of enterprise-grade **APIs** and **SDKs** that help product and engineering teams solve two common problems at scale: **in-app chat** and **social activity feeds**.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch.  Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as [React](https://getstream.io/chat/sdk/react/?utm_campaign=ThisWeekInReact_Jan2022_ReactChatApp&utm_content=Developer&utm_medium=Newsletter_Content_Ad&utm_source=ThisWeekInReact), [React-Native](https://getstream.io/chat/sdk/react-native/?utm_campaign=ThisWeekInReact_Jan2022_ReactChatApp&utm_content=Developer&utm_medium=Newsletter_Content_Ad&utm_source=ThisWeekInReact), Flutter, Android, Angular, Compose, Unreal and iOS. It also supports [Expo managed workflow](https://github.com/GetStream/stream-chat-react-native/tree/develop/examples/ExpoMessaging?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter).

Unlock enterprise-grade features, functions, and UI components **completely free** for your startup or side project with the [Maker Account](https://getstream.io/blog/maker-account/?utm_campaign=ThisWeekInReact_Jan2022_ReactChatApp&utm_content=Developer&utm_medium=Newsletter_Content_Ad&utm_source=ThisWeekInReact).

## React-Native

[React-Native-Owl: Visual Regression Testing for React-Native](https://formidable.com/blog/2022/react-native-owl/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

This new solution runs your React-Native screens natively, takes screenshots, and compare them to the previously stored screenshots in `./owl` to generate a report. All this is well-integrated with Jest (like snapshots).

Very happy to see visual regression testing progress for React-Native: this is very useful and React-Native has been left behind a bit compared to web. See also [Storybook React-Native-Web](https://www.dannyhwilliams.co.uk/introducing-react-native-web-storybook?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) permitting to do similar things with [Chromatic](https://www.chromatic.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter), but requiring a web conversion.

**Extras:**

-   React-Native 0.67 should be released this week ([changelog](https://github.com/facebook/react-native/blob/main/CHANGELOG.md?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter#v0670) is available)
-   [Build Flavor / scheme for React Native](https://medium.com/@ujjwalsayami/build-flavor-scheme-for-react-native-c58e764d4ecf?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): allows to install the same app multiple times on a device: useful to manage multiple envs.
-   [Trying to understand the internals of Reanimated 2](https://aditya01.hashnode.dev/trying-to-understand-the-internals-of-reanimated-2?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): nice overview, many diagrams
-   [expo-auto-navigation-webpack](https://github.com/EvanBacon/expo-auto-navigation-webpack?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): work in progress by Evan Bacon to enable file-system-based navigation in React-Native ([previous demo](https://twitter.com/Baconbrix/status/1384355891772739584?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)). Now using Webpack instead of Metro.
-   [Expo Modules + JSI](https://twitter.com/tsapeta/status/1480932920462389255?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): Expo confirms the goal to simplify our life to create performant native modules in Swift or Kotlin, based on JSI. This should come first to iOS.
-   [Demo React-Native-Gesture-Handler buttons](https://twitter.com/swmansion/status/1480919926097518596?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): demonstrates advantages over React-Native Touchables
-   [Drawing (with Skia) in React Native](https://tonyowen.medium.com/drawing-with-skia-in-react-native-bffa816f4aa3?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): creating a progress indicator
-   [React-Native-Skia drawing app demo](https://twitter.com/chrfalch/status/1481969262575169538?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): drawing with fingers on a canvas
-   [Who is going to Support your Next Mobile App Project? Hint: Not React Native or Flutter](https://ionicframework.com/blog/who-is-going-to-support-your-next-mobile-app-project-hint-not-react-native-or-flutter/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): where to get support for a RN app? 🤷‍♂️
-   [React Native Facebook Login: The Hard Way + The Expo Way](https://blog.expo.dev/react-native-facebook-login-the-hard-way-the-expo-way-d8eb978f82ee?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

## Partners

-   [**Start React Native**](https://start-react-native.dev/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): learn everything about gestures and animations with William Candillon
-   [**React-Native Weekly**](https://andrei-calazans.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): stay up-to-date React-Native core updates
-   [**TypeScript Weekly**](https://www.typescript-weekly.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): the best TypeScript links every week, right in your inbox.
-   [**ES.next News**](http://esnextnews.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): learn about the latest in JavaScript and cross-platform tools
-   [**Tailwind Weekly**](https://tailwindweekly.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): all things Tailwind CSS, new issue every Saturday
-   [**G2i**](https://www.g2i.co/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
-   [**Infinite Red**](https://infinite.red/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): US React-Native experts making your idea a reality
-   [**Software Mansion**](https://swmansion.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): the co-creators of React Native and the technological core of many tech companies

## Other

[Parcel CSS](https://parceljs.org/blog/parcel-css/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

A new parser, compiler, minifier un CSS written in Rust, reusing [rust-cssparser](https://github.com/servo/rust-cssparser?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) from Firefox. Outperforms competitors on terms of speed and output size (even esbuild). Integrated in Parcel, but can also be used standalone, in Rust or JavaScript (Webpack?), and even [Deno or web (WASM)](https://twitter.com/devongovett/status/1482040430615318528?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

[Dioxus](https://dioxuslabs.com/blog/introducing-dioxus/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)

New Rust framework largely inspired by React (hooks, VDOM, RSX...), strongly typed, performant, cross-platform (web, mobile, desktop, SSR). Aiming to be easy to adopt for a React/TypeScript dev.

I looked a bit the cross-platform support and I'm not sure yet how it works. It says native performance but seems to be using [Tauri](https://tauri.studio/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) on desktop and mobile, afaik using WebViews? 🤔

**Extras:**

-   [TypeScript Cheatsheets](https://www.typescriptlang.org/cheatsheets?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): 4 official cheatsheets: Type, Interface, Class and Control Flow Analysis
-   🎥 [CSS Cascade layers](https://twitter.com/Una/status/1482096170843480068?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): gives better control over specificity of CSS rules. This could have an interesting impact: [not having to care anymore about CSS insertion order](https://twitter.com/sebastienlorber/status/1483155894288494593?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter). See also [Cascade Layers Explainer](https://css.oddbird.net/layers/explainer/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter).
-   🧵 [How can I optimize my frontend for the fastest page load times?](https://twitter.com/leeerob/status/1481693352059973632?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [Announcing The Astro Technology Company](https://astro.build/blog/the-astro-technology-company/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): raising 7m$
-   [Adding Vite to Your Existing Web App](https://css-tricks.com/adding-vite-to-your-existing-web-app/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): useful to migrate from Webpack
-   [Make Beautiful Gradients](https://www.joshwcomeau.com/css/make-beautiful-gradients/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): Josh Comeau explains how to design gradients and introduce [Gradient Generator](https://www.joshwcomeau.com/gradient-generator/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [State Of JavaScript Survey](https://stateofjs.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): survey is open
-   [What's New In DevTools (Chrome 98)](https://developer.chrome.com/blog/new-in-devtools-98/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [Publishing and consuming ECMAScript modules via packages](https://2ality.com/2022/01/esm-specifiers.html?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [Accelerating Svelte's Development](https://svelte.dev/blog/accelerating-sveltes-development?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [Safari 15 IndexedDB Leaks](https://safarileaks.com/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) + [Exploiting IndexedDB API information leaks in Safari 15](https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [Discontinued Long Term Support for AngularJS](https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [How we reduced our nodejs monorepo build time by 70%](https://dev.to/scopsy/how-we-reduced-our-nodejs-monorepo-build-time-by-70-3oma?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [The Cost of Logging in 2022](https://www.nearform.com/blog/the-cost-of-logging-in-2022/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [The State of WebAssembly -- 2021 and 2022](https://platform.uno/blog/the-state-of-webassembly-2021-and-2022/?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   [How we built a VS Code extension with Rust, WebAssembly, and TypeScript](https://www.osohq.com/post/building-vs-code-extension-with-rust-wasm-typescript?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)


[![meme](https://cdn.hashnode.com/res/hashnode/image/upload/v1642583942538/tzlDaQSOH.png)](https://twitter.com/jaredpalmer/status/1481981571112611843)