Max RozenMax Rozen
TwitterArticlesNewsletterUses

Keeping up with React Libraries

It’s no secret React has a library discoverability problem.

While the number of stars in GitHub and weekly downloads in npm might be a good starting point for finding quality libraries, normally you have to wade through a lot of reddit, hacker news, dev.to and individual blog posts to find the best ones.

In this (continually updated) article, I’ll be adding libraries (excluding component libraries, I track those here) worth talking about on a single page.

Table of Contents

Accessibility

React Aria

React Aria provides you with Hooks that provide accessibility for your components, so all you need to worry about is design and styling. Particularly useful for those building design systems.

Example usage - useButton:

import { useButton } from '@react-aria/button';

function Button(props) {
  let ref = React.useRef();
  let { buttonProps } = useButton(props, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

<Button onPress={() => alert('Button pressed!')}>Press me</Button>;

Animation

Animation adds soul to otherwise boring things. These libraries let you build the web app equivalent of Pixar’s Intro Animation, but in React.

Both libraries have similar APIs and support spring physics over time-based animation, though Framer Motion seems to be used more often on GitHub.

Framer Motion

Framer Motion is an animation and gesture library built by Framer. The added benefit of Framer Motion is that your designers can build animations in Framer, then hand-off designs to be accurately implemented using Framer’s own library.

React Spring

React Spring uses spring physics rather than time-based animation to animate your components. Relative to Framer Motion, React Spring has been under development for longer, with a greater number of open-source contributors.

Browser Features

Ever been asked to implement random features that someone on the product team saw on another website and thought was cool? These libraries save you time on building those features.

useClippy

useClippy is a React hook that lets you read and write to your user’s clipboard. Particularly useful for improving UX, letting you save your users from double clicking on your data fields, by providing them a button to copy values.

ReactPlayer

ReactPlayer is an awesome library that lets you embed video from major sources (YouTube, Facebook, Twitch, SoundCloud, and more), and define your own controls to the video.

React Toastify

React Toastify allows you to add fancy in-app notifications (like the “Message Sent” notification in Gmail) to your React app with only four additional lines of code.

Data Fetching Libraries

You might be wondering why you’d even need a data fetching library, when you could use useEffect and fetch(). The short answer is that these libraries also handle caching, loading and error states, avoiding redundant network requests, and much more.

You could spend hundreds of hours implementing these features in a Redux-like state manager, or just install one of these libraries.

React Query

React Query lets you request data from the same API endpoint (for example api/users/1) across multiple components, without resulting in multiple network requests.

SWR

Similar to React Query (in fact, based on the same premise, see this issue for more info), SWR is another data fetching library worth checking out. SWR has the added security of being used by Vercel in production as part of their platform.

Data Visualisation

Everyone wants to have beautiful charts, but nobody wants to learn no complicated-ass D3

  • Ronnie Coleman, probably

visx

If you’ve ever used a popular charting library such as Recharts or Charts.js, you’ll know it’s surprisingly easy to reach the limits of what a charting library can do for you.

visx is different, in that it provides you with lower-level React components that are much closer to D3 than other charting libraries. This makes it easier to build your own re-usable charting library, or hyper-customised charts.

Forms

Forms suck. Take it from someone who once had to build a “smart” form with 26 possible fields to fill out - you want to pass off as much as possible to your form library, leaving you with only quick field names to enter.

React Hook Form

React Hook Form is different to other form libraries, in that by default, you’re not building controlled components and watching their state. This means your app’s performance won’t get slower as you add more fields to your form.

On top of that, it’s probably one of the best documented libraries out there - every example has a CodeSandbox, making it easy to fork and try out your particular use case.

Mocking APIs

You could probably argue mocking libraries belong more under testing utilities, but they have added benefits during development too. While not specifically tied to React, they can be extremely useful when you want dynamic responses from your mocked endpoints.

Mock Service Worker

MSW is a library that lets you mock both REST and GraphQL APIs, that uses service workers to generate actual network requests.

Why is that cool?

You can actually use MSW as part of your development workflow regardless of technology choice, not only while testing! It’s so cool that Kent C. Dodds wrote a whole article about it.

In short, you can use MSW to experiment with building frontend features before the backend is ready AND mock your backend for tests.

State Management

There’s been a fair bit of innovation in state management since the early days of Redux, it’s worth taking a look again if you’re interested in using global state.

Jotai

Jotai describes itself as a primitive state management solution for React, and a competitor to Recoil. It’s quite minimalist, meaning less API to learn, and if you understand React’s useState hook, you’ll probably understand Jotai’s useAtom hook.

Mobx

Mobx is a global state management library that requires a bit of a mental model shift to get used to. Once you get it though, Mobx provides a solution to state management and change propagation without the boilerplate.

Recoil

Recoil is a state management library - think Redux meets React Hooks, minus the boilerplate.

Redux Toolkit

Redux Toolkit (or RTK), is the official, opinionated way to manage your state using Redux.

RTK greatly reduces the amount of boilerplate necessary for using Redux, provides sensible defaults, and keeps the same immutable update logic that we know and love.

xstate

XState is a library that lets you formalise your React app as a finite state machine.

State machines aren’t a particularly new concept, but developers have only recently started to realise that maybe our apps could be less buggy if we explicitly define the states they can be in, and the inputs required to transition between states.

XState also generates charts for you based on your app’s xstate configuration, meaning your documentation will stay up to date as you code.

Zustand

Zustand is another state management library, that aims to be simple and un-opinionated. The main difference is that you use hooks as the main way to fetch state, and doesn’t require peppering your app with context providers.

Testing

React Testing Library

React Testing Library (RTL) has become kind of a big deal for testing in React (and other libraries/frameworks). It’s now the default testing library that comes with create-react-app.

RTL replaces Enzyme in your testing stack. While both libraries provide methods for rendering React components in tests, RTL exposes functions that nudge developers away from testing implementation details, and towards testing functionality.

Do you struggle to keep up with best practices in React?

I send a single email weekly with an article like this one to help improve the quality of your React apps. Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 153 React developers who signed up this month!

    rssTwitterGitHub

    © 2020 Max Rozen. All rights reserved.