React Newsletter #290

React 18 beta, React Location launch, and 10 questions that will make you better at reviewing React code


This week’s issue is sponsored by CARTO.

Looking to develop map visualizations or geospatial apps using React?

CARTO, the leading Location Intelligence platform, offers a complete toolkit of React templates, components and libraries for rapid geospatial app development. Find out more.

👉 Check out their developer resources.


News

React 18 is now in beta

The final, stable release is still months away, but this beta release gets us one step closer. It also introduces three new APIs:

"At this point, we believe React 18 is feature complete. We don't anticipate any additional new APIs before the final release." -Andrew Clark, React Core Team member

A new Router - React Location

Created by Tanner Linsley (the creator of React Query, React Table, React Charts, and React Virtual), React Location is a brand new router that provides "powerful, enterprise-grade routing for React applications."

  • Async Loaders & Elements
  • Parallelized
  • Prefetching
  • Caching
  • 1st-class Integrated Search Params API
  • Code-Splitting
  • Error/Pending/Timing States
  • Nested Layouts

Articles

My 10-Question React Code Reviewing Routine

Chak Shun Yu writes about how "there are a lot of resources out there that will teach you how to write better React code, but there are barely any articles, videos, or tutorials out there that will help you improve at reviewing React code." Thankfully, he wrote this article, which explains his 10-question routine for reviewing code.

You can use React Query for slow computation, not just API

Swizec Teller explains how and why you may want to consider using React Query for this less common use case.

How I Would Use a UI Library

In this brief article, Kyle Shevlin expounds on this idea of how he hopes to approach using UI libraries going forward -- "for every UI component you're using in the library, create a facade of your own and consume the facade throughout your app."

useEffect sometimes fires before paint

useEffect should run after paint to prevent blocking the update. But did you know it’s not really guaranteed to fire after paint? In this article, Vladimir Klepov explains why that's the case and what you can do about it.


Tutorials

Get started with Storybook and Next.js

Michael Chan writes about how he dove deep to learn how to make Storybook the best component-driven UI environment for Next.js pages and shows you how to do the same in four steps.

React Loading State Pattern using Toast & SWR

Theodorus Clarence writes about how managing the React loading state can be a bit annoying and demonstrates a simple way to address it with Toast and SWR.

How to Create Modern Cards using React and Tailwind

Francisco Mendes demonstrates how to make a simple card with a unique design when compared to many libraries and frameworks using React and Tailwind.


Projects

Data Grid 3.0

A high-performance React grid component, with rich rendering and first-class TypeScript support. It was open-sourced about 9 months ago and just released v3.0 with new features like column groups, freeze columns, simpler theming and more. Read more about it in the founder's Reddit post.

Graphire

A hook-based React library to visualize huge networks of nodes and links in an unopinionated way. Created by Flavio Schneider.


Videos

React Social Login with Passport.js

In this hour-long video by Lama Dev, you'll learn how to authenticate with a user's Google, Facebook, or GitHub account using React and Passport.js.

made with ❤️ by ui.dev