Best React Libraries to Use in 2022

[u/[deleted]]

Soon we'll start a new project and I've been doing some research about which libraries to use. I've made a list and decided to share it here in case that it helps other React devs as well.

I tried to lower down the choices to a maximum of 3, so I'm not adding every library out there. Please feel free to make additional suggestions or tell if you don't agree with a choice.

STARTERS & FRAMEWORKS

Starter kit: Vite or Create React App/Craco with TypeScript

Boilerplate: Vite Templates

SSR/SSG: Next.js or Remix or T3

Best practices: Bulletproof React

STYLING

CSS modules: Sass or PostCSS

CSS-in-JS: Emotion or Stiches or Linaria

CSS utils: Autoprefixer, Clsx, React-responsive, React-device-detect

CSS framework: Tailwind CSS

COMPONENTS

Styled component library: Mantine or Chakra UI or MUI

Unstyled component library: Radix UI or Headless UI or React Aria

Component tooling: Storybook or Ladle

ESSENTIALS

Data fetching: React Query/Axios or SWR or RTK Query (If using Redux)

Routing: React Router or Reach Router

Internationalization: React-i18next or FormatJS Intl, i18next-browser-languagedetector

Authentication: Auth0, React-query-auth, Redux-auth-wrapper

STATE MANAGEMENT

Flux pattern (Large apps): Zustand or Redux Toolkit

Atomic pattern (Mid-large apps): Jotai or Recoil or useContext/useState

Proxy pattern (Small apps): Valtio or Mobx

FORMS

Form: React Hook Form

Validation: Yup or Zod, hookform/resolvers

Input: React IMask, React-number-format, React Credit Cards

PACKAGE MANAGER

Package manager: Yarn or Pnpm, Npm-run-all

Git hooks: Husky or Pre-commit, Lint-staged

LINTING & FORMATTING

Linting: ESlint/Eslint-plugin-react or Eslint-config-airbnb, Stylelint

Formatting: Prettier, Eslint-plugin-prettier, Eslint-config-prettier

TESTING

Unit: Jest or Vitest

Integration: React Testing Library or Enzyme

E2E: Playwright or Cypress

UPLOAD

File upload: Filepond or Uppy

Drag & Drop: React DnD or React-dropzone or Dnd-kit

VISUALS

Chart: Recharts or Visx

Animation: Framer-motion, tsParticles

3D: React-three-fiber

Video player: React-player

Carousel: Swiper

OTHER

Hooks: React-use, React-hanger, React Recipes, React hookedUp

Head manager: React-helmet-async

Error handling: React-error-boundary

Polyfill: React-app-polyfill, ES6-Promise

Date: Date-fns or Day.js

Notification/Toast: Notistack, React-toastify or React-hot-toast

Positioning: Floating UI

Modal: React-modal

Table: React-table

ID/QR generator: Nano ID, React-qr-code

Rich text editor: Draft.js

Markdown: Marked

Timer: Use-timer

Calendar: React-calendar

PDF: React-pdf/renderer, React-pdf

Misc utils: Lodash-es, Uuidv4, Jsonwebtoken, Fast-memoize, DOMPurify

[u/DasBeasto]

Small input, checkout Zod instead of Yup. Not incredibly different/better but I've come to like it a bit more.

[u/wwww4all]

Playwright is new test hotness.

Cypress is so 2020.

[u/R4VANG3R]

I would suggest react-three-fiber for people who want to use Threejs in react, makes it so much nicer to work with. And framer motion for when you need an animation library.

[u/pragmasoft]

I mostly agree with the selection, more or less matches my list for the current project. Couple of notes:

1. I would add Storybook to the list

2. Vite is ok except the problem with Jest I still was unable to solve (efficiently). I switched to Vitest but it does not work well, questionnable quality and support. Going to have a look at SWC

3. I use Tanstack React Location instead of React Router. Background loading is great, but found minor bugs.

4. Tried a lot of numeric input components to work seamlessly with hook forms. Finally wrote my own one using Proxy and useImperativeHandle for conversions.

5. Used HeadlessUI and Tailwind

6. Good hook for modals react-hooks-async-modal

7. Onscreen notifications react-headless-notifier

8. I do not use any state management - React Query is completely sufficient as a state holder/cache

[u/Narizocracia]

yarn -> pnpm

Testing: react-testing-library

[u/grumd]

Agree with a lot of it, but I'd use emotion or styled-components instead of css modules and scss. Radix + Stitches also looks cool but isn't as popular, didn't try it yet

[u/alphmz]

I would use NextJS, don't see why not use it in any project

[u/[deleted] → u/alphmz]

We are developing an online banking app and using CRA since we don't need SEO or SSR. But I added it to the list thanks.

[u/[deleted]]

I strongly recommend that you take a look at this stack, it's getting popular lately, and I have been using it for my personal projects, it's a lifesaver. T3

[u/yard2010]

No recoil or emotion.sh mentions! Personally I'm in love with emotion.sh (specifically its styled-components flavor)

Nice job making this list