React Newsletter #300

How to write performant React code, Choosing the right component library, and Reading the Redux source code


This week's issue is sponsored by Stream.

Stream is the easiest way to build chat apps. See for yourself with this React Chat Tutorial that demos how to quickly build a flexible chat experience using Stream's API and their Stream Chat React components.

👉 Check it out.


Articles

Choosing the right component library for your design system: MUI vs Chakra

Kolby Sisk (from the Udacity Engineering Team) writes about how at there's a component library at the center of every design system and how he recently went through an involved process to figure out which component library would be the best fit for Udacity’s next generation design system.

How we migrated 541 components from Styled Components to Emotion with zero bugs

Varun Vachhar writes about how refactoring CSS without altering the look and feel of the UI is one of the most challenging tasks you'll face as a frontend developer. Then, he shares a case study on how his team at Storybook was able to streamline a big CSS refactor by dogfooding their visual testing tool.

Performance Optimization for three.js Web Animations

In this article, Paul Scanlon (from the Gatsby team) discusses how to work with JavaScript animation libraries without negatively impacting your Gatsby site’s performance.

Reading Source Code -- Redux

Alex Kondov writes about what he learned about the fundamentals of Redux by diving into the state management library's source code.

We're Building a Visual Regression Testing Library for React Native

The Formidable Labs team writes about their motivations behind building react-native-owl -- an open-source visual regression testing library for React Native that's heavily inspired by Detox.


Tutorials

How to write performant React code: rules, patterns, do's and don'ts

Nadia Makarevich writes about how “premature optimisation”, when it comes to React and performance, can actually be a good thing. Then, she shows you how to implement a “real-life” app step by step -- first in a “normal” way, using the patterns that you’ll see practically everywhere, then refactoring each step with performance in mind and comparing the result in the end.

Learn How You Can Quickly Customize Your React Rich Text Editor

If you’re looking for a great React Rich Text Editor component, you’ve found one that should definitely be on your shortlist: the KendoReact Editor. This 10-minute video tutorial demos two (of many) powerful customization features of the KendoReact Editor -- defining input rules and customizing Editor tools & creating new ones. [sponsored]


Projects

TinyBase

TinyBase is a tiny, reactive JavaScript library (with zero dependencies) for structured state and tabular data. Created by James Pearce, and Engineering Director at Meta.

React-Text-transition

A simple React library for easily animating your text transitions.

Platforms Starter Kit

An all-in-one starter kit for building platforms (like site builders and low-code tools) on Vercel that's created by the Vercel team.

Preview.js

A VSCode extension that lets you preview React (and Vue) components instantly.

useWorkerizedReducer

useWorkerizedReducer is like useReducer, but the reducer runs in a worker. This makes it possible to place long-running computations in the reducer without affecting the responsiveness of the app. Created by Surma.

made with ❤️ by ui.dev