esmevane

React Libraries for 2022

Every year, Robin Wieruch makes an excellent post recommending React libraries. Every time, it's full of great recommendations and good reasoning. This post is just a derivative of Robin's, and mainly I'm just presenting the same categories. Well, the same categories - but different picks. Also, a single pick per category.

Also also, self-awareness moment: this mostly a list for myself in case I forget.

Which is to say, this shorter post is nowhere near as versatile or comprehensive as Robin's. So, if that's what you want - go check Robin's post out instead. It's a great read.

My React Picks

Without further ado, here they are:

In Depth

Single page app framework

This was a new experience for me, but after using it a few days I'm sold. Previously, every time I needed a single page app, I'd just kick off Create React App. Over the years, of course, I've done some modifications here and there, and now I've got some decent boilerplate.

The issue here is this: every time I set up that boilerplate, I'd attempt to do it on maintainable terms. That is, no ejecting, and no installing anything extra like React App Rewired, or CRA Configuration. It was generally a struggle, and I'd made some boilerplate to counter that struggle.

So, why Vite?

Vite didn't need any of that boilerplate dance. Everything I attempted to do, it supported out of the box. So, here's my verdict: Vite is on the level of CRA, except it supports configuration. That gives it the single page app category, in my opinion.

Full stack app framework

For full stack apps, I always go with Next.js. It's been a few years in my back pocket and I've never regretted it. Its docs are great, and the repo itself has a giant examples folder, with every integration imaginable demonstrated.

In fact, this website is built on Next.

Data fetching

Axios is the reigning library here for a lot of folks. What a lot of those folks don't realize, though, is that it was originally written as a holdover to fetch. These days, Axios' own creator recommends just using fetch directly, and I agree. The native fetch API has come a long way, and it can do anything you may need it to. Just use fetch.

Routing

React Router took the lead here, years ago, and hasn't lost the position. However, they have changed their API considerably, and unfortunately that means a lot of tutorials are out of date. That's a bummer for the router ecosystem, but here's the good news: Routing isn't really necessary outside of single page apps. So, for now, React Router still does the trick.

CSS

The CSS preprocessors and CSS-in-JS libraries out there right now are all pretty great. However, you can do anything you need using CSS variables and CSS modules, these days. I've stuck to these for many of my most recent projects, and I'm happy every time.

UI Kits

Mantine, a recent contender, has everything I want. It's accessible, has a good dark mode, supports open color, and is deeply customizable. What's more, it's MIT licensed.

Iconography

React Icons bundles a ton of open source icons. Essentially, you get them all with one bundle install. This is a no-brainer.

Animation

Framer Motion is as perfect a system here as I could've hoped for. Animations are easy to manage, understand, and implement. The surface area of the API is low, since they extend host components over implementing new ones, where possible. Try it out, if you haven't already.

Visualization

Victory wins out here, simply because it's a kit. React is about composition, and kits help with that. Victory serves as a robust, but easy-to-start-with abstraction for D3, and doesn't compromise its status as a kit to get there.

Form libraries

I am against form libraries. In my personal experience, I've never encountered one that I didn't wind up fighting, later. What I do often need, though, is a validation layer. For that, yup does the trick.

Types

Unless you work for Facebook, you ought to use Typscript if you'd like types.

Linting

ESLint here, as ever.

Formatting

The mainstay here is Prettier, and it doesn't seem to be going anywhere for now.

Hosting

Vercel is my pick, mainly due to not being fully familiar yet with Netlify. I'll be happy to come back here and adjust this if I learn more about Netlify later, of course. But Vercel has been incredible at every step, quick to adopt, and super useful. This site runs on it, in fact.

Test Runner

Jest. Others may be up and coming, but right now, the best experience for a test runner is Jest.

Testing

Testing Library, and, much more broadly, the idea of testing the output of components instead of their interior.

Test Mocking

Avoid stuff like sinon. Javascript is a dynamic prototypal language. You can hand-roll mocks with a simple variable or function declaration.

However, network IO is another thing entirely for that, use MSW, or Mock Service Worker. It can even be used on the live app! Say, for example, if you're building a front-end for an API that still isn't finished. Or if you want to consolidate disparate APIs into your own shape.

Visual Testing / Docs

Go with Storybook if you need visual testing / documentation. It's got the largest community and the preponderance of prior art. It can be large, and cumbersome at times to keep versions up to date or line build processes up. However, right now there's nothing better.

E2E tests

You don't need to write a lot of these. You should cover, at least, your happy path and known regressions. When you do write them, though, Cypress has a good experience. It's worth setting up.

State management

My pick, by far, is XState. I'll be doing plenty of write-ups on it, I imagine, and why. The crux of it is this, though: most state frameworks help you cache state, but leave the concept of managing it to you. The outcome is, of course, that your state continues to tangle: it's all up to you to invent.

Enter XState: it relies on statecharts, a decades-old specification with hundreds of thousands of hours of dev work behind it. State charts run the industrial software world, the game industry, and more. State charts surface the complexity inherent in a system, and do it in a highly observable, bug-proof way. It embraces asynchrony and stateful operations, and can help with data caching as well.

Learn and use XState.

Internationalization

React i18next does the trick, here. I would recommend avoiding its React bindings - just because they aren't necessary, mostly. You can do everything you need to do with the core tool itself.

Rich text editors

Use TipTap for rich text editors. TipTap was formerly a Vue centric tool, but has since been decoupled. It combines two incredible libraries, ProseMirror and Yjs, to create a highly customizable, collaboration-friendly kit. TipTap will amaze you with what it's capable of. It definitely amazed me!

Payments

Stripe is a good hold-over here, and is still probably best in class for the payments world.

Dates & Times

Luxon is pretty good, but my pick is date-fns. If only because it's easier to just pluck the right function as needed than work with handing around context / objects.

That's a Wrap

And that's it for 2022. I'm not sure if I've gotten this across, but you may have noticed a common theme in some of these tools. That theme is this: composition.

Components, and React, are all about composition and kits. A lot of these tools will offer you strong composition out of the box, helping you build an app that is uniquely yours.

However, there's another theme, in addition to composition: quality of life. In every case, I've tried to pick a tool that can get you far, and won't get in your way when you need customization. But I've also tried to line up the picks with picks that have a good out-of-the-box experience.

It's my personal opinion that our productivity and mental health exist at the junction of flexibility and obvious baselines. These tools help me live at that junction. Hopefully they help you live there, as well.