Sébastien Lorber
Sébastien Lorber

Sébastien Lorber

This Week In React #125: tRPC, T3, Remix, Zustand, Server Components, Drag & Drop, Forms, Gatsby, Remotion, RN, Skia...

This Week In React #125: tRPC, T3, Remix, Zustand, Server Components, Drag & Drop, Forms, Gatsby, Remotion, RN, Skia...

Sébastien Lorber's photo
Sébastien Lorber
·Nov 23, 2022·

9 min read

Subscribe to my newsletter and never miss my upcoming articles

Hi everyone!

This week is Black Friday. I created a page with the best deals for a React dev. I already found some of them, but some are not announced yet, so come back on Friday ;)

Black Friday 2022 Banner

I finally have the opportunity to put tRPC in the spotlight, with official releases and a great article comparing it to GraphQL!

We also have some great Remix-related content in general.

I like the direction React-Native takes!

Don't forget to fill out the State Of JS survey! Glad Docusaurus made it this year. Feel free to suggest the newsletter for the resources 😏 with some luck it will be featured next year 🙌


💸 Sponsor

FlyCode Makes React Apps Editable without coding, Git based

FlyCode Makes React Apps Editable without coding, Git based

FlyCode (YC S22) makes React web apps editable in minutes so Product and UX teams can iterate and release products faster, so they don't have to wait on (or consume) developer time.

FlyCode reads your regular React code and finds Texts, Images, Design tokens and Analytics event, then it let's non-coders collaborate and edit them and send back a pull request (they don't need access to GitHub!)

  • Saves development time
  • No code integration, it just reads your code!
  • GitHub based, a bot is scanning the code and creates pull requests
  • Use your own stack and components
  • Retain codebase ownership

You can get started here: flycode.com/developers


⚛️ React

tRPC 10

tRPC 10

Nice refactor of tRPC which greatly improves DX and IDE support. This library that facilitates typesafe backend calls is gaining more and more followers. It can be easily used in the React ecosystem thanks to the integration packages (Next.js, React-Query...). I love the tagline "Move Fast and Break Nothing" 😄

To understand the idea, I recommend reading Why we ditched GraphQL for tRPC. Alex explains why they replaced GraphQL with tRPC in their Bison starter, in a React context. tRPC requires much less boilerplate, TypeScript codegen and JS bundle, while improving DX, IDE support and simplifying cache management. The way to handle over-fetching is different: you should not hesitate to create a new procedure. tRPC is ideal for a full-stack Node.js app in TypeScript with co-located backend/frontend code (Next.js for example). GraphQL remains a good solution to create a public API exposed to partners who do not necessarily use JavaScript and yet want to benefit from codegen (OpenAPI is also a good solution for this).

I take this opportunity to also mention T3-App, an end-to-end typesafe stack for Next.js based on tRPC, Prisma, Tailwind... It greatly helped tRPC grow in popularity this year, and now has an official docs site. Its tRPC tdocs explain well the advantages compared to a classic Next.js Route API. See also create-t3-turbo: a Turborepo monorepo with Next.js + Expo, both using tRPC.


Working with Zustand

Working with Zustand

Dominik reminds us where we come from in terms of state management. He explains why he likes Zustand, a minimalist and magic-free solution in the React philosophy. He gives some tips on how to best use it, like exposing custom hooks, using atomic selectors, or grouping actions in an immutable object. Good pragmatic tips I can definitively agree with!


Remix dual reponses

Remix and the Alternate Timeline of Web Development

Jim explains that Remix has taken a few steps back to rethink our entire frontend app model. With Remix, progressive enhancement support does not require writing our app in 2 different ways (client + server) like with other frameworks, as Remix routes can return both JSON and HTML from the same code.


Taming the dragon: Accessible drag and drop

Taming the dragon: Accessible drag and drop

Devon (Adobe) just announced the release of accessible drag & drop hooks for React-Aria and React-Spectrum. He explains how the keyboard and screen reader support works to allow users to select an element, and find potential targets with Tab, or the mobile experience. All this with many demos. It feels once again that there is a lot of work behind this React-Aria API, which is the first to try to solve this complex problem.



💸 Sponsor

The React Native Show - a podcast series

The React Native Show - a podcast series

Since you are here, you surely like to stay up to date with the greatest React news ! 🔥 If you want to delve into React and React Native, play the latest episodes of The React Native Show:

The React Native Show is a podcast series hosted by Callstack. Each episode explores a different topic in detail. The host dives deep into every discussion with his guests - world experts in the field.


📱 React-Native

[Reply] 2022: How can we improve React Native?

The React-Native team has officially responded to the discussion on how to improve React-Native. We learn many details about the roadmap. The investment on React-Native seems to be accelerating. The points I'm particularly interested in are:

  • Metro should catch up: swc, pnpm, symlinks, ESM support "exports"...
  • Yoga and CSS support will be improved: flex gap, boxShadow...
  • Cross-platform, unified APIs, React-Native-Web now under Meta ownership
  • DX improvements: debugging, stacktraces, sourcemaps, LogBox...


🧑‍💻 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.

🧑‍💼 Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly

Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!

🧑‍💼 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

Life is short - Make sure to spend it arguing about JS frameworks with strangers on the internet

For even more fun, it's all there!

This Week In React - Fun Thread

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