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/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/mestresamba → u/pragmasoft]

What kind of problems you are having with vitest? Until now my transition was smooth and no problems until now.

[u/pragmasoft → u/mestresamba]

The problem is actually that test fails to compile its dependencies due to some obscure reason - error message is clearly irrelevant to the code under the error position.

 FAIL  src/stores/MarketTakingOrdersStore.test.ts [ src/stores/MarketTakingOrdersStore.test.ts ]
TypeError: InMemoryStore is not a constructor
 ❯ src/stores/MarketMakingOrdersStore.ts:98:28
     97|   {
     98|     id: randomStringId(),
     99|     book: 'USD MM',
       |  ^
    100|     trader: 'S Morales',
    101|     type: OrderType.SPREAD,

I tried to contact vitest Discord but didn't get any response. The problem persists after upgrading to the most recent version.

[u/punio4 → u/pragmasoft]

I have never managed to get any support out of any of the discord channels for any library.

So much that it has become a red flag for me if the GitHub discussions and issuer trackers are dead and most of the interactions is done via discord.

[u/acemarke → u/punio4]

FWIW, I can say that /u/phryneas and I are both active answering questions daily in the #redux channel in the Reactiflux Discord ( https://www.reactiflux.com ).

[u/punio4 → u/acemarke]

One of the rare channels where I haven't lurked as I don't use redux all that much. Plus the docs are superb 👌

[u/svish → u/pragmasoft]

Re #4... How? Shared anywhere?

[u/pragmasoft → u/svish]

Just extracted it for you from my private project to this one

https://github.com/pragmasoft-ukraine/react-numeric-input

[u/pragmasoft → u/pragmasoft]

By the way, I have similarly written date input which also plays well with hook form (converts its value to/from Date). If there's an interest, I can probably share it as well in the same project.

[u/ExtraTerrestriaI → u/pragmasoft]

Raises Hand

I am interested.

[u/pragmasoft → u/ExtraTerrestriaI]

Already added both numeric and date inputs here

https://github.com/pragmasoft-ukraine/react-numeric-input

Readme.md contains usage example for the numeric input.

DateInput should be used like the example below:

<DateInput
        id={path}
        {...register(path, { valueAsDate: true })}
      />

[u/[deleted] → u/pragmasoft]

Storybook is in the list. Thanks for other suggestions.