Sébastien Lorber
Sébastien Lorber

Sébastien Lorber

This Week In React #121: Next.js, cache, CSS-in-JS, Qwikify, Typesafety, 3D, Vitest Preview, Outstatic, Remix, React-Native...

This Week In React #121: Next.js, cache, CSS-in-JS, Qwikify, Typesafety, 3D, Vitest Preview, Outstatic, Remix, React-Native...

Sébastien Lorber's photo
Sébastien Lorber
·Oct 25, 2022·

7 min read

Subscribe to my newsletter and never miss my upcoming articles

Hi everyone!

It's the conference season: the ViteConf replay is available, React Advanced just finished, and more to come.

The Next.js conference starts in a few hours. We'll probably get a Next.js 13 announcement, along with nested layouts, and some other super cool stuff that starts with Turbo 🤭. Let's discuss that next week.

We also have all the hosts agreeing to improve their Next.js support at the same time: Netlify, Cloudflare, Microsoft...

Don't miss William Candillon's React-Native video season 5 which starts today!

I recorded a podcast episode about Docusaurus 2.0 with PodRocket last month. Totally forgot to mention it 😅 I want to do more podcast episodes in the future, so please invite me! 😉

💡 Check this newsletter on Twitter - visual format 🎨


💸 Sponsor

Sizzy - the browser for developers

How come professionals in every other industry have specialized tools, but web developers are still stuck using the browser that their grandma is using for shopping on Amazon?

If you're opening localhost:3000 in any other browser except Sizzy, you're wasting hours of your precious time.

Before Sizzy: web development is stressing you out, responsive design is hard, you have an overwhelming amount of opened tabs and apps.

After Sizzy: all the tools you need are in one place, responsive design is a breeze, no more context switching.

You can download it here and try it for free for 14 days!


⚛️ React

Why We're Breaking Up with CSS-in-JS

Sam is a maintainer of Emotion, one of the most popular CSS-in-JS libs. He explains the advantages and disadvantages of CSS-in-JS, with a focus on runtime libraries problems. For his company Spot, the cost of serializing styles was too high. They replaced Emotion by Sass modules (CSS modules + Sass) with a CSS utility system. On Docusaurus, we use CSS modules and I confirm that it is a good no-runtime and relatively simple alternative. DX is not as good but still quite acceptable.

This article has started many interesting discussions. It has been known for a while that CSS-in-JS libraries with runtime cause performance problems. Dan Abramov confirms and does not want to use any runtime on the new React doc site. Ryan Florence mentions performance problems with Chakra, which uses Emotion.

Tailwind remains a good alternative. For me, it can be put in the CSS-in-JS no-runtime category, especially in a React context where Tailwind styling is done via JSX. Some question its maintainability, but in practice it works quite well.

Qwik React

Qwik is an innovative SPA framework that avoids performance issues related to client-side hydration. It can now integrate with React through a qwikify$() function to wrap any existing React component. client: directives (inspired by Astro) allow to control when the React component will be hydrated with a lot of granularity. The demo integrates Material UI in a Qwik app. See also this video. I think it's a good solution to avoid doing an all-in on this new framework, and try it gradually. We can also keep the cross-platform properties of React, while adopting Qwik to improve performance on the web.

Fully Typed Web Apps

Kent C. Dodds explains the interest of having end to end type-safety, from the DB to the UI, through the different boundaries: network, localstorage, DB... He talks about validation (schema, type guards), type generation (Prisma) and conventions (Remix). He explains how this experience is possible with Remix, thanks to inference: it is better to use typeof than as.

Building an interactive WebGL experience in Next.js

Vercel explains how they created an impressive immersive signup experience for the Next.js conf, based on React-Three-Fiber. It's still complex to understand without 3D / WebGL / Three.js experience, but the deconstruction in successive steps is interesting and gives an insight into the mindset of doing creative dev.


💸 Sponsor

Sunsama - How 1000s of software engineers stay productive without burning out

How 1000s of software engineers stay productive without burning out

You know that the output of your work matters more than the number of hours you put in. Sunsama has been the insider secret of 1000s of developers who use it to work less but achieve more.

Eliminate endless tab-switching with their JIRA, Github, and Notion integration. Timebox your day and create space for your hobbies and side-projects.

The best part? They're offering a 14-day free trial (no card needed) so you can start achieving more, today.


📱 React-Native


🧑‍💻 Jobs

🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

🧑‍💼 G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

💡 How to publish an offer?


🔀 Other


🤭 Fun

Meme - VSCode running on iWatch

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this