React Newsletter #302

Vercel's big year, why efficient hydration in JS frameworks is hard, and a review of React best practices


This issue is sponsored by Raygun -- the best way to build more resilient apps.

Raygun is expanding its powerful Error Monitoring and Crash Reporting solution to Flutter. Now you can get complete visibility into the health of your Flutter applications, with rich diagnostics that take you to the root cause of errors and crashes.

Check out this blog post to learn more.


Articles

Why Efficient Hydration in JavaScript Frameworks is so Challenging

Ryan Carniato (the creator of SolidJS) wrote this great breakdown of the various approaches to hydration, along with the tradeoffs they each present.

Vercel's 2021 Year in Review

Read about Vercel's highlights from last year -- including Next.js getting 2.2 million npm downloads per week -- and what they're looking forward to in 2022.

Building animations in React Native with accessibility in mind

Marton Bodonyi shows how you can use a hook called useReduceMotion to make your React Native animations more accessible to those who are sensitive to motion on screens.

React Best Practices – Tips for Writing Better React Code in 2022

Jean-Marc Möckel wrote this beginner-friendly guide as a "collection of tips I'd have given myself when I was starting out" in React.


Tutorials

How To Build an Interactive Dashboard with React

This tutorial will show you how to build a sleek-looking, interactive dashboard using TileLayout. Check out all you can do with this deceptively simple component: drag, order and toggle dashboard widgets, create dynamically configurable tiles, and more. [Sponsored]

How To Hard Reload Your React Web App Using Error Boundary

This tutorial by Saksham Khatod shows you how to build a basic Error Boundary component and create a button that will hard reload a webpage.

The Complete Guide to URL parameters with React Router

We made this tutorial so that you could learn what problem URL parameters help to solve and how you can use them effectively with React Router.


Projects

GraphCommerce

An open source, headless e-comm storefront built with GraphQL, React, TypeScript, and Next.js.

DesignSystem.tools

A resource that helps explain what design systems are, what value they provide, and the features that can compose one.

react-responsive

CSS media queries in React for responsive design and more.


Videos

Mastering React's useEffect

In this 25-minute video, Jack Herrington shares some strategies that you can use to make sure the useEffect hooks you write always work when and how you expect them to work.

made with ❤️ by ui.dev