React Newsletter #242

React performance, a guide to refs, and animated transitions


Articles

React is slow, what now?

In this article, Fran Guijarro writes about how you can optimize your React performance by improving what and which components render.

No One Ever Got Fired for Choosing React

Jake writes about how it can sometimes feel tempting to build your team's app in pure vanilla JS, but why you'll probably need to incorporate some type of framework/abstraction as it grows.

React Refs: The Complete Story

In this in-depth article, Corbin Crutchley walks through two definitions of refs:

  1. A mutable data property to persist data across renders
  2. A reference to DOM elements

Then you'll explore additional functionality to each of those two definitions, such as component refs, adding more properties to a ref, and even exploring common code gotchas associated with using useRef.


Tutorials

Animated Transitions with React Router v5

In this article and video tutorial, you'll learn how to add animated transitions to an application using React Router v5 and the React Transition Group library.

React Testing Library Introduction

A nice introduction to RTL with a good example of how use it, courtesy Daniel Solberg and the react.christmas team.


Projects

RTK Query

An advanced data fetching and caching tool for Redux, designed to simplify common cases for loading data in a web application. We wrote a lot more about it yesterday's issue of Bytes.

OpenChakra

A visual editor for the Chakra UI component library. OpenChakra lets you draft components with a simple drag and drop UI.

WMR

A tiny, all-in-one development tool for modern web apps, in a single 2mb file with no dependencies. Created by the folks behind Preact.

Morphing speech bubble

Demo of a beautiful, morphing speech bubble on CodePen. Built with React, react-spring and react-use-gesture.

made with ❤️ by ui.dev