How to React in 2024, Part 2

In Part Two of our series on React.js in 2024, we continue to explore the forefront of React development. After discussing three methods of starting the React project in our previous post, we now turn our attention to another trio of cutting-edge techniques shaping the future of web development. This post will dive into the nuances of these approaches, their implications for developers, and how they contribute to the evolving landscape of React.js. Prepare to deepen your understanding of the React ecosystem and discover new strategies to enhance your web development projects.

In Part One we learned how to get started with the React project. Now, let’s figure out how to make it safe and maintainable on a language level.

TypeScript

In modern React development, TypeScript has become an integral part of the ecosystem. TypeScript, a statically typed superset of JavaScript, brings type-checking and advanced tooling into our development process. This static typing feature eliminates a lot of potential bugs that could happen with dynamic typing, reducing the need for writing tests to catch these types of bugs. It enhances the developer experience by catching errors during development, improving code readability, and making refactoring more predictable.

Alongside TypeScript, the Zod library is a handy tool for developers who want a straightforward method to describe data structures, convert them into TypeScript types, and ensure type safety during runtime. By connecting the dots between the planning phase and actual execution, Zod helps us to be precise about how data should look and ensures it stays that way when the code runs. This approach boosts confidence in the reliability of data structures, making the code more resilient and easier to maintain.

Now that our code is properly typed, let’s explore further.

TanStack

Remember React Query, the async state management library we mentioned in How to React in 2024, vol. 1? Well, it turns out that its creator, Tanner Linsley, has a whole stack of amazing tools that make web development much more pleasant. What's neat is that these tools are headless, meaning you have the power to customize them according to your needs without dealing with unnecessary complexities.

Some of the most notable are:

• TanStack/Query - formerly known as React Query, is a tool that simplifies data fetching and state management, making your apps faster and smoother.
• TanStack/Router - library that Tanner worked on for quite a while. Router that can be direct alternative to React Router, which has been considered the standard for client side rendered apps since forever. The main advantage of TanStack router is its TypeScript support for everything from the Link component to managing States with URL query parameters. It’s a library that has a lot of potential and could even compete with Next.js and Remix in the future.
• TanStack/Virtual - a headless library for virtualizing large lists. It does not render any markup, so it’s applicable to any style system and UI component library.
• TanStack/Table - another headless library for managing tables and complex data grids. It comes with a lot of handy features like column ordering, pinning, filtering, pagination, etc.

TanStack is a very versatile set of tools that solves many common problems we face every day on the web. It’s easily applicable to most setups because of its headless nature.

UI component libraries

Introducing UI component libraries to our React projects can be a game-changer, simplifying the way we build user interfaces. These libraries offer a lot of ready-made components and styles, acting like a shortcut that not only saves time but also ensures a polished look for our app.

That is great, until we realize we need custom styles and behaviours for most of our UI. Tweaking and hacking around any component library to make it fit the needs of our custom design and product requirements is not a fun task for anyone.

The alternative is to build components ourselves. Which is also a very complex task to achieve since there’s a lot to worry about. Responsiveness, state management, performance, accessibility, a good API, and the list goes on. So what do we do to improve this process?

Enter the best of both worlds:

• Headless components - these components provide the building blocks we need without predefined styles, offering a blank canvas for us to implement any look and feel we want. With headless components, we get all of the accessibility, state management, fast development cycles, and so on. Notable libraries in this category include projects like Radix, Headless UI, and React Aria.
• Tailwind - the CSS tool that’s caused so many arguments in the web development world over the past few years. But in my experience, it’s the only thing that actually makes CSS easy. All of the CSS knowledge we have is still applicable as a utility class, and there’s no need to worry about naming classes anymore or having many different CSS files. If the classes get too long or repetitive, just make a React component with them! On top of that, it's a perfect fit with the mentioned headless components!
• Shadcn UI - the collection of beautifully styled and accessible components, powered by Radix and Tailwind. But the catch is that it’s not a library, so we don’t install it in our projects; we just copy and paste the parts we need. That makes it a perfect starting point since we have complete control over it and the ability to customize it to our needs. It’s completely free and open source.
• Catalyst UI - similar to Shadcn, was made by the creators of Tailwind. Provides a similar experience. But unlike Shadcn, it's a paid service.

Summary

As we conclude this two-part series on React.js in 2024, it’s clear that React is steadily establishing itself as a frontrunner in web development. The new methods we’ve discussed add to what we learned before and show how flexible React is and how much it can grow. React keeps empowering developers with new tools and methods, reshaping web development. Mastering both client-side and server-side aspects of React means staying committed to learning and excelling in various areas. As React evolves, focusing on the basics like performance, security, and design remains crucial. The React community’s ongoing innovation makes this an exciting time to build for the web!