Essential React Libraries: My Personal Toolkit for Seamless Development

Written on 2023-05-22 by Adam Drake - 9 min read

When you start working on more than one or two React apps you start to see repetitive patterns and functionalities. Therefore, it makes sense to reuse snippets of codes and libraries. Libraries are the building blocks of applications. They are usually battle tested across many scenarios so you can use them with a certain level of trust. They are also developed by people far brighter than the average person so you can essentially build on the shoulders of giants. No need to reinvent the wheel when someone has put in a great amount of effort and time to produce a wheel that is far better than anything you could ever produce yourself.

With that being said, I will now list my favourite go-to libraries I use when building React applications. There are 10 libraries in total and with these libraries you can build a solid, good looking app that can fetch any data, take in data from users, handle complex state situations on the client side and provide tests to make sure what you deploy really works as expected.

Styling

Tailwind

TailwindCss is my go-to styling libraries when building out (primarily) static websites.

Pros: It is easy to use and enables quick development. It enables you to write the styles right in the component you are working in and the default styles enable you to make any site look pretty snazzy with minimal effort.

Cons: Obviously the old argument of having sooooooo many classes can get a little overwhelming in your component. Also, when you start doing anything fairly complex in CSS it can sometimes get a bit tricky to accommodate in tailwind.

Mantine.dev is my go-to component library when I am building an application that needs quick iterations and an MVP (Minimal viable produce) up and running in a short amount of time.

Pros: I really like it's default styles and it gives you many nice components out of the box such as notifications, menus, buttons, input fields, drawers, modals etc. To build all these things from scratch takes time and when you are under pressure to get something out that not only looks good but functions as well then a component library is a must.

Cons: Occasionally you get into situations where the component from Mantine does about 90% of the things you need but not all. In which case you have to make trade offs... Use the existing component and compromise on your UI functionality or take the time and build a custom component that does everything you need.

Tabler Icons is my favourite find of 2023! It has so many icons and is so easy to use. It has turned my task of finding icons into an absolute pleasure.

Pros: So many icons to choose from and I am yet to find a situation where it didn't have an icon I needed (or at least something very close). Very easy to use.

Cons: It's a library that provides icons... as long as it provides icons I don't see there is much it can do wrong.

Handling State

Redux is my go-to stable global state management library. I have experience with it and I know what it's good for and what it isn't.

Pros: Been around for an age and is tried and tested. Many examples online and they have really good documentation. With the Redux Toolkit it has gotten even simpler to use Redux and the development tools really help you when you get into some complex state handling.

Cons: Nowadays with all the data-fetching solutions out there and other state handling options, Redux can seem like overkill or too heavyweight. Also, when dealing with certain state updates that affect other parts of the store it can get quite complex to handle all that logic.

Jotai takes an atomic approach to global React state management with a model inspired by Recoil. I am fairly new to Jotai but from my initial experience with the library I can see what all the fuss is about.

Pros: It's lightweight, easy to understand the concepts and it can be sprinkled into your app as and when it is needed. Recently I have been using it in a project with Tanstack-Query and it's a very powerful combination.

Cons: Too early days for me to notice any major cons. I could predict that it could become tempting to stuff too much complexity into an atom.

Forms

React Hooks Form is the library of choice I use to gather user information. In almost every application I am building these days, there is a requirement for collecting some data from the user and a form is almost always needed. They aren't particularly sexy (although occasionally they can be!) but they are an integral part of any Web Developers toolkit.

Pros: Nice, simple API with good documentation and good examples. It caters for all scenarios you are likely to run into when dealing with a form. It provides form validation out of the box and supports schema validation with Yup, Zod , Superstruct & Joi. In combination with a component library like MaterialUI or Mantine.dev you can make a fully functional, good-looking form very quickly.

Cons: React Hook Form uses React hooks. Therefore, you can't use it directly in class components.

Data Fetching

Tanstack-Query (React-query) is probably my favourite library in this list. I have used it on many projects and it has changed the way I build apps. It's such a nice approach to fetching data and then refetching data so different parts of the app can be updated independently. It's a tool with specific use cases but when used properly it's a really powerful addition to any application.

Pros: Solid API that has been around for a while but still constantly evolving. The documentation is nice and clear and maintenance is on-going. The fact you don't have to be dealing with all these useState and useEffects now when fetching data really helps clean up and simplify your codebase. You can query and mutate data and the cache it provides really helps the user get quick loading times.

Cons: There is a bit of a learning curve coming into it. There are also many options available that it can take some time to realise what the library can and can't do.

Routing

React-router is my go-to routing library of choice. If you asked me to pick another one I would actually be pretty hard pressed! I use this library in react applications and when in Nextjs I use their native routing solution.

Pros: It does everything you expect from a routing library and even more. It keeps coming with innovations and maintenance is on-going. It has good examples in their documentation and makes things like Protected Routes relatively straight forward.

Cons: This library has evolved quite a bit over time so it does require time and effort to keep up with all the changes. There are also multiple ways to implement things so it can be confusing what is the best approach sometimes. I don't want to complain about having too many options but sometimes it can be a little overwhelming.

Testing

Vitest I have recently converted all my codebases I work on over to Vite. Just the pure pace of it makes it such a pleasure to work with. Therefore I had to update what I was testing with and now all unit tests are done with Vitest instead of Jest.

Pros: It really isn't a big transition from Jest at the end of the day. Once you have the configuration sorted then the unit tests pretty much look the same code wise. They have some nice additions like the Vitest-UI which gives you a nice UI in which to run your tests. All in all its a solid library for running your unit tests.

Cons: It's not Jest and up until Vite the whole JS community seemed to be geared towards using Jest (maybe this isn't true but it seemed like it from my perspective). Therefore it was a bit weird to be testing using something else. That weirdness quickly passed though as I realised how good Vitest is.

Cypress is the go-to library for end-2-end testing in your React application. I was late to the game but since I have joined I have been enjoying this library so much. It has also saved me a bunch of times from pushing bugs live. Tests are good people!!

Pros: It's very easy to use and very easy to setup. It also gives you a great real-world example about running cypress tests on something that resembles a proper application. I found this so useful and learnt many techniques from studying this codebase. Also Github copilot seems pretty good at predicting the tests you want to write so saves you a bunch of time in writing tests.

Cons: Maybe not a con of Cypress per se but end-2-end tests in general. They really do require maintenance. Things change in your app pretty regularly so it's critical you update tests as you update your app. Otherwise things can get pretty messy pretty quickly. This obviously takes extra development time. However, in the long run it's well worth it as your codebase will be more robust and reliable.

Conclusion

These are my favourite React libraries that I use on a regular basis. They have all been developed by some great developers and I feel privileged I am able to utilise them in my own applications. I have realised over time how important documentation and community are in the success of any library. Without them it's very difficult for a library to succeed and flourish over any length of time.

Tweet this article Discuss on Twitter

Written by Adam Drake

Adam Drake is a Frontend React Developer who is very passionate about the quality of the web. He lives with his wife and three children in Prague in the Czech Republic.