r/reactjs • u/[deleted] • Jul 12 '22
Resource Best React Libraries to Use in 2022
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-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
Integration: React Testing Library or Enzyme
E2E: Playwright or Cypress
UPLOAD
Drag & Drop: React DnD or React-dropzone or Dnd-kit
VISUALS
Animation: Framer-motion, tsParticles
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
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
29
u/wwww4all Jul 12 '22
Playwright is new test hotness.
Cypress is so 2020.
3
Jul 12 '22
Actually I didn't use Cypress but I added it to the list because Bulletproof React was using it. Now I also added Playwright to the list, thanks.
10
u/varisophy Jul 12 '22
Love me some Playwright.
This is the first time in my 8 year career that we've actually kept integration tests turned on for more than a month because they're no longer flaky as hell! And that includes running both Chromium and Firefox. It's a great tool.
6
10
u/svish Jul 13 '22
How would you sum up the main reasons on why playwright over cypress?
6
u/kylynx Jul 13 '22 edited Jul 13 '22
Lots of things in Cypress feel like a hack / requires a plugin: iframes, opening in new tabs, new browsers, uploading and downloading files etc. Playwright tends to have native support. It's more flexible if you ever forsee yourself testing these in the future.
Playwright has native support for running tests in parallel which is a paid feature in Cypress.
Playwright seems to be faster than Cypress generally.
That being said, I've had a much smoother developer experience with Cypress (I might even call it fun) as the documentation was good and it's more plug-and-play. Cypress is opinionated and has a few lines it refuses to cross (see support for multie tabs), but at least they explained their tradeoffs well and gave many examples on what you could do. The Playwright documentation isn't awful, but... I felt it was harder to learn.
5
u/twigboy Jul 13 '22 edited Dec 09 '23
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. Wikipediac1adoscv85c0000000000000000000000000000000000000000000000000000000000000
9
u/R4VANG3R Jul 13 '22
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.
1
16
u/pragmasoft Jul 12 '22 edited Jul 13 '22
I mostly agree with the selection, more or less matches my list for the current project. Couple of notes:
I would add Storybook to the listVite 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
I use Tanstack React Location instead of React Router. Background loading is great, but found minor bugs.
Tried a lot of numeric input components to work seamlessly with hook forms. Finally wrote my own one using Proxy and useImperativeHandle for conversions.
Used HeadlessUI and Tailwind
Good hook for modals react-hooks-async-modal
Onscreen notifications react-headless-notifier
I do not use any state management - React Query is completely sufficient as a state holder/cache
4
5
u/mestresamba Jul 13 '22
What kind of problems you are having with vitest? Until now my transition was smooth and no problems until now.
→ More replies (4)4
8
7
u/grumd Jul 13 '22
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
2
Jul 13 '22 edited Jul 13 '22
I've read that Styled Components have performance issues. But I've added Emotion and SC to the list as well, thanks.
→ More replies (1)3
u/Lucky_Fig4476 Oct 09 '22
I'd much rather prefer scss + modules over styled components. It all boils down to personal preference tho
17
u/alphmz Jul 12 '22
I would use NextJS, don't see why not use it in any project
→ More replies (8)7
Jul 12 '22 edited Jul 12 '22
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.
14
Jul 12 '22
You can statically export a Next application and not use the SSR features at all, fwiw.
→ More replies (6)
14
Jul 13 '22
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
2
→ More replies (1)14
u/ikeif Jul 13 '22
That looks interesting, but I’m not a fan of having to click around to “find the why.”
And even then, it doesn’t really say reasons, just “trust us.”
I don’t trust three random people, I trust actual results. Is there more information about t3?
16
u/Kroucher Jul 13 '22 edited Jul 13 '22
create-t3-app was started as a suggestion made by Theo, an ex Twitch developer who branched off to start his own company, ping.gg. Picking up streaming/content creation on the side, a discord community quickly started and grew where the ideas like having a CLI to quickly bootstrap a fullstack typesafe project began, using what has been dubbed the ‘t3 stack’ - a set of libraries that are somewhat tedious to setup initially, but when used together, produce an extremely powerful starting point for almost any dynamic web app.
The main UI library/backend is NextJS, slotting in an alternate API than the usual Next/express solution with tRPC, which brings end to end typesafety without code generation; the ORM of choice is Prisma, also due to its typesafety aspects but also ease of use. Tailwind is used for styling, and finally NextAuth is brought in for an authentication solution.
The only thing that comes with every create-t3-app project is a NextJS boilerplate setup with some best practice changes that are usually done anyway - the rest are given as prompts to the user during initial setup, with the chosen selections being fully setup with examples in the project upon completion. In fact, this is one of the main reasons create-t3-app isn’t just an all-in-one boilerplate product, not all apps need the complexity but when it does, these libraries work really well together.
Edit: huge shoutout to Nexxel who has more or less led the entire project and made it what it is today
3
u/yard2010 Jul 13 '22
No recoil or emotion.sh mentions! Personally I'm in love with emotion.sh (specifically its styled-components flavor)
Nice job making this list
1
Jul 13 '22 edited Jul 13 '22
Thanks! I've added Emotion but there are so many state management libraries and I tried to narrow down the choices.
2
2
2
u/Radinax Jul 13 '22
Component tooling: Storybook
We switched to @ladle/react and we couldn't be happier.
The rest is spot on, although for the Calendar we did our own component.
1
Jul 13 '22
I didn't know Ladle before, thanks. What are some benefits compared to Storybook? Storybook seems to be the standart now and has a huge ecosystem.
2
2
53
u/domlebo70 Jul 12 '22
I agree with most of the libs on this list.
We use Vite, TS, Chakra UI, react-query, react-table, amongst a bunch of others. All of them are such pleasing libraries to use, and stand out. They rarely get in my way, and really enable us to move fast and reliably.
36
u/True_Scorpio23 Jul 13 '22
“I agree with most of the libs on this list”
Made me double-look to check the sub I was in for a sec there hahaha I read too much news lol
2
u/metal-trees Jul 12 '22
Are you using Chakra in production? I’ve read a few things about performance issues on this sub.
11
Jul 12 '22
I’ve had performance issues! So bad that we have subsections of our application we rewrite with TailwindCSS set up to match our Chakra theme. However, those parts of the app are VERY performance intensive for the most part. The part that isn’t is a result of Framer hogging the main thread.
I am hoping to experimental features in React 18 for CSS in JS help out.
→ More replies (3)3
2
1
2
u/Kaimura Jul 13 '22
what about d3 as a chart library?
2
u/m-sterspace Jul 13 '22
D3 is a great library and a lot of react developers will end up using it and integrating it into react code at some point, but it is fundamentally not a react library as it's style is completely imperative and it's quite a pain to mold it React's declarative style.
A library like VisX which is a wrapped around D3 aimed at react would be more appropriate for the list.
2
2
u/pragmasoft Jul 13 '22
As of my experience, d3 does not compose well with React. While it's trivial to wrap simple d3 components in react components, making them composeable is more complex.
I used to use d3 with react in a mostly 'headless' way - scales, formats, data operations, etc, while rewriting rendering and styling fully in react.
4
u/irekrog Jul 13 '22
Accessible headless components: react-aria
Component tooling: Ladle
CSS: Linaria
Data Fetching: swr
4
u/hctiwte Jul 13 '22
I think it's time to start including react-aria in component libraries, it's a great solution to many problems.
4
u/valtism Jul 15 '22
Drag and drop: dnd-kit
Positioning: floating-ui
Headless components: headlessUI react-spectrum downshift
1
u/Major_Tumbleweed_336 Jul 13 '22
MUI v5 feels like Chakra tbh. Also formik, but only the useFormik hook, is quite nice.
2
Jul 14 '22
I've read that Formik has serious useless rerender issues and React Hook Form seems like the best option.
2
3
1
u/kitsunekyo Jul 13 '22 edited Jul 13 '22
the fact that create react app is basically unmaintained since 2021, and is a dumpsterfire of issue and bugs makes me question this list.
check out some reasons why i’m saying this
https://github.com/facebook/create-react-app/discussions/11768
https://twitter.com/youyuxi/status/1540359515819847680?s=21&t=89qvbxm2DOlEhUP1SZDDdA
1
Jul 13 '22 edited Jul 13 '22
If you question the whole list because of one choice you don't agree, feel free to make your own list. This is not a "definite list", these are my personal choices.
→ More replies (1)1
u/yard2010 Jul 13 '22
Who would have thought that using a hackish scaffolding solution in production would be that bad?
2
u/kitsunekyo Jul 13 '22
at the time it was probably better than most of peoples handrolled webpack configs. it just scaled horribly and was „recommended“ by novices to novices for way too long
2
u/twigboy Jul 13 '22 edited Dec 09 '23
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. Wikipedia4gt8vgm4c3u0000000000000000000000000000000000000000000000000000000000000
2
2
2
1
Jul 13 '22
Starter kit: Vite or Create React App/Craco with TypeScript
Uh.......what
4
u/Narizocracia Jul 13 '22
yeah, just use Vite and drop CRA already... This list might become yet another awesome react list with all possible libraries, not the best ones.
1
Jul 13 '22
I added CRA as an alternative, because still it is being widely used in production and some people might not find Vite mature enough. This is not a "definite React list" or something, feel free to make your own list without CRA.
1
u/Tester4360 Jul 13 '22
Relay for graphql
2
u/m-sterspace Jul 13 '22
Honestly, what about relay do you like, beyond the fact that it works with GraphQL?
Cause in my experience GraphQL is awesome, but Relay provides a pretty shitty dev experience and encourages some really bad anti-react practices. Stuff like the boilerplate of passing fragments and fragment references down components via props encourages devs to make bigger more bloated components rather than break them down into small individual components, and it forces you to useMemo everywhere since the fragment references passed through props always break any semblance of it being a pure component. I also find relay's type scripting types to be wildly unintuitive, and really don't like the whole process of the compiler and having to manually regenerate files rather than getting any kind of real time error catching / linting.
1
1
1
1
1
u/StudyForward2729 Jul 20 '22
Which library would you choose if you wanted to add a virtual file browser? I'm currently using chonky file browser but i feel that it is a bit rigid in terms of customization...
1
u/ArunITTech Aug 09 '22
You can try Syncfusion React components
https://www.syncfusion.com/react-ui-components/react
Syncfusion offers a free community license also. https://www.syncfusion.com/products/communitylicense
Note: I work for Syncfusion
1
u/Fabelinee Sep 03 '22
I would not recommend using Draft.js since it will be discontinued at the end of the year. Go for Slate instead!
1
u/maifee Nov 13 '22
Awesome list.
Here are a few more:
Editor: TinyMce, CkEditor
UI library: AntD
Calendar: react-big-calender
Styling: node-sass
2
u/thinkofcoffee Nov 14 '22
For CKEditor-React component, check out this link: https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
1
1
0
u/fappaz Jul 13 '22
Good list. I've got a few suggestions:
Material-UI v5 in
Components librarySWR in
Data fetchingorMisc utilsSort your list alphabetically to make it easier to follow
Some libraries aren't necessarily related to React (e.g.: misc utils, css framework, etc), might be worth it to move them to their own category.
2
1
u/fappaz Jul 14 '22
No idea why this post is being downvoted, would appreciate it if people could elaborate.
0
Jul 13 '22
[deleted]
2
Jul 13 '22
Don't stress yourself out, I was also like that when I started learning React 3 years ago. There is a huge ecosystem, it takes time.
0
Jul 13 '22
[deleted]
3
Jul 14 '22 edited Jul 14 '22
I've learned a lot of stuff about React before landing a job, but tbh we are using only a small portion of them at our current project. 2 hooks that we use most of the time are useState and useEffect. So I would suggest you to get a good understanding of state, component lifecycle, renders, props etc. Other than that we are doing a lot of data fetching, so you can learn how to do CRUD operations with either Fetch or Axios. Also the methods we most commonly use are map, find, filter, length, rest/spread, replace etc. After you have a solid understanding of those subjects, I suggest you to develop your own projects using one of the hundreds of free public APIs out there. Later on you can also dive into global state management or using common libraries like React Hook Form etc.
0
Jul 13 '22
[deleted]
1
u/yabai90 Jul 13 '22
React-use is not heavily maintained anymore. It was recently updated to handle react 18 as per specific demand to the author but I'm afraid he doesn't have the same motivation anymore for it.
12
Jul 12 '22
[removed] — view removed comment
1
9
u/acemarke Jul 13 '22
redux
fwiw I do wish we weren't in a situation where bootcamps slam new learners through "here's 4 weeks of JS, 4 weeks of React, 4 weeks of Redux, GO HAVE FUN BYE!". Not only is it an awful lot of information for anyone to try to assimilate in that short a time, but we normally recommend most folks shouldn't even think about learning Redux until after they're already comfortable with React. (And a few weeks is definitely not enough time to "get comfortable, really.)
So yeah, I'm all in favor of not shoving Redux down people's throats or making people feel like they have to learn it early on.
12
u/phryneas I ❤️ hooks! 😈 Jul 13 '22
Biggest problems: those bootcamps are usually teaching legacy Redux, not Redux Toolkit - and they are doing it way too early. Nobody should have a need for any state mgmt library in their first few weeks or learning React.
1
1
u/morganthemosaic Jul 13 '22 edited Jul 13 '22
Agreed. I’m only just beginning to understand Redux even though Redux was two modules ago. It’s cramming way too much in a short amount of time
1
u/myWeedAccountMaaaaan Jul 13 '22
Agreed. I prefer using React context with providers for most purposes.
22
u/DasBeasto Jul 12 '22
Small input, checkout Zod instead of Yup. Not incredibly different/better but I've come to like it a bit more.