Introduction
As the year comes to a close and the yearly Spotify Wrapped puts your friends music tastes to the test, I thought it would be fun to bring a similar idea for the area of React to life.
Unfortunately I didn't spend my year meticulously tracking each usage of a React-related NPM package, so instead of some statistical piece, you'll have to settle for an overview and recap of my favorite and most-used frontend technologies in the last year and beyond, from memory.
React Libraries
TanStack Query
The first library I want to highlight is TanStack Query, a long-standing favorite of mine when it comes to data fetching and mutations in React single page applications. It's simple hooks abstract a lot of the hard work that comes with states, error handling and caching for data fetching on the client. And of course, as with all TanStack libraries, it comes with TypeScript support out of the box.
In the year 2024, TanStack Query saw an impressive 45 minor releases, adding support for React 19 and lots of other small quality of life additions. A great resource for a deep dive into TanStack Query is the awesome Practical React Query blog.
React Select
If you've ever tried building your own dropdown, you've chosen a world of pain and suffering. What might seem easy at first will quickly turn into a huge accessibility nightmare, and you're left picking up the pieces when advanced functionality like custom actions, pills, multi-select or asynchronous search inevitably creeps in.
My favorite library to solve-it-all is React Select, a fully featured select component for React, supporting asynchronous selection and deep customization via a very well structured modular component system. It also comes with built-in TypeScript support.
React DatePicker
If you're working with forms containing dates, you'll quickly find yourself in need of a date picker. My go-to library over last year has been React DatePicker, a simple and well-designed date picker by HackerOne. Customizing styles is fairly simple and the functionality covers pretty advanced use cases.
This package is one that I'm was little hesitant to list here, because I did encounter a few unexpected bugs in advanced use cases. I still chose to recommend it here, because date pickers are inherently a hard problem, and React DatePicker is the best solution I've found so far.
dnd kit
After the discontinuation of the popular react-beautiful-dnd library, dnd kit is my new pick of 2024 when it comes
to building drag and drop interfaces. Its modular structure and great examples make it easy to get started,
and the library is very well maintained.
The examples in the official Storybook are a good way to see the power of dnd kit in action yourself.
TanStack Table
When working with data-rich applications, TanStack Table isn't a niche recommendation by any means. The headless UI library for data grids and tables has been around for a long time, but is still going strong in 2024 and beyond.
The library is very well documented, as is typical for TanStack libraries. It's headless nature means it can be seamlessly integrated into existing projects with custom abstractions. Its features include common table operations such as filtering, pagination, row/column pinning, row selection and many more. For anything more than a couple of simple tables, and I'm guaranteed to reach for TanStack Table.
Jotai
While client-side state management has become rarer in recent times due to better options like TanStack Query
or server components, there are still cases where keeping larger chunks of state in the client is necessary. When
React's built in useState isn't enough, Jotai's simple yet powerful atom-centric design gives state-management superpowers.
The basic API is very clean and minimalistic, but Jotai comes with a built in jotai/utils bundle that contains
a variety of utlilities that integrate with the core functionality, like automatically serializing state to
the browsers' local storage.
When the scope grows, it easily scales to more complex state management needs via various extensions, like an integration with TanStack Query or the powerful Optics extension.
Finally, it's great documentation and built-in TypeScript support make it a joy to work with. While there are other great solutions out there, Jotai was my new favorite in 2024.
Motion
A long-standing favorite in the React ecosystem, what was previously known as framer-motion is now just
motion. Decoupled from the Framer branding and with a fresh new JavaScript API (but keeping the React support,
of course), motion has long been my favorite animation library for React.
Layout transitions in particular are a favorite of mine, and just work ever so smoothly.
I also love the new website, so if you haven't seen it yet, go check it out!
Utilities
This section will deal with my favorite utilities – most of which aren't React-specific tools. I still choose to list them in this React-focused post, because they are great additions to large scale React codebases and work seamlessly, sometimes with out-of-the-box integrations.
Zod
Every form needs validation, and the market for this in the JavaScript ecosystem had quite the influx of new libraries this year. My my go-to this year was Zod, which I have been using for the past few years as well, due to its well-designed API and native TypeScript support.
In 2024, Zod saw two minor releases, the latest one adding support for the Standard Schema spec. I'm also very excited about Zod 4, which has been actively worked on this year.
A new addition to the validation ecosystem which I saw frequently recommended was Valibot, which is quickly approaching its first stable release. My short encounter with it wasn't enough to build a proper opinion, but I'm certain it will start to see more use in 2025.
date-fns
This is the king of date manipulation in the JavaScript world, and it's just gotten better and better in 2024.
The recently released major version 4 has introduced native support for timezones, which resolves
probably the biggest pain point of the library in the past. The library is very well structured and the
existing features leave little to be desired for most cases. If working with dates, date-fns saves the day.
floating-ui
In todays design systems, you'll be hard pressed to find applications without any floating UI elements like menus, dropdowns or tooltips. Building these yourself might seem simple enough, but the work required increases sharply when making sure these elements are accessible, deal with scroll and overflows correctly, can be nested without z-index issues, and so on.
Floating UI is the successor to the popular popper library, and provides primitives that solve these
exact problems in JavaScript. Building on top of the core library, @floating-ui/react provides primitives
for React, and has become my go-to for building tooltips and context menus. It's versatility and composable API
make it an easy recommendation for any floating UI needs.
Tooling
In this category, I'll group items that aren't directly part of the result when working with React, but rather part of the workflow.
Vite
What better way to start this category off than with Vite, the web's latest and greatest build tool, which I was very happy to see being adopted quite broadly in 2024. I've personally used it for every new project where a custom build setup was required, and even migrated some existing projects over.
Vitest
Moving on, we stay in the Vite ecosystem: Vitest brands itself as the Next Generation Testing Framework, and I think they might have a point. It integrates seamlessly with projects using Vite, providing a Jest-compatible drop-in replacement for testing. My favorite bit is Vitest's browser mode, allowing tests to be run in a native browser environment. We've used this feature quite extensively in the last year, and I don't think I could go back to simulated environments.
Playwright
Playwright is to end-to-end testing what Vitest is to unit and component testing: A simple solution that just works. After previously using Cypress, I have migrated countless Cypress tests to Playwright over the last 12 months, resulting in considerably increased test stability and speed.
Apart from the performance aspect, I'm also very happy with its UI mode and IDE integration. Overall, Playwright is the closest thing I've seen to a perfect end-to-end testing solution so far.
Bun
While Bun, the new JavaScript runtime on the block, hasn't quite become my runtime of choice just yet, I've still used it for a considerable amounts of projects this year. It comes feature-packed with tons of nice-to-have options, such as a built-in test framework and native TypeScript support. I've seen some issues in larger projects that have yet to be ironed out by the Bun team, but I'll certainly keep an eye on its further development. I think long term, Bun has a good shot at replacing Node.js for most of my work.
React Compiler
I said above that the items in this category aren't directly React related, but I lied! We need to talk about React Compiler, which was teased by the React team for years and finally made available to the public in the first half of 2024.
React Compiler will compile your React code and do the heavy lifting when it comes to memoization – meaning
no more useMemo, useCallback, or memo (at least long-term). While it's still in beta, it already powers
Instagram Web in production, so it packs quite the punch.
I've used it for a few small tests and explorations this year, but I'm looking to properly start using it for larger projects in 2025. In fact, this site is using it already, and I've not encountered any problems so far!
Content Collections
I'll end this list with a very niche tip that I'm really happy to have discovered this year: content-collections!
As part of your project build, it will make static content available to you as a type-safe import,
with full validation out of the box. You can tweak it to handle multiple content sources, and it even
comes with packages to deal with MDX or Markdown with little to no extra work.
I've stumbled over this by accident, but once I tried it, I couldn't go back. As a matter of
fact, the blog you're reading right now is using content-collections.
Closing Thoughts
I hope you enjoyed this little compilation of my favorite tools and libraries in frontend development in 2024. Of course, there are many missing bits here. For example, I've not gone down the linting rabbithole, where I would usually opt for Prettier and EsLint.
I also only looked at React or React-related packages, and have completely skipped over many other aspects of frontend development, like styling or accessibility. Maybe next year I'll include these areas, too.
Until then, I hope you have a great time!