Introduction

React is a JavaScript library for building user interfaces, and it has a rich ecosystem of packages and libraries to choose from. These packages provide pre-existing solutions, eliminating the need to reinvent the wheel.

‍

When it comes to picking the best and most popular ones for React, it can be difficult to choose where to start.

‍

In this blog post, we will present our selection of packages that play a crucial role in the three fundamental aspects of React frontend development: state management, form management, and building a design system.

It is important to emphasise that even though these packages/libraries cover a lot of use cases, it is necessary to assess their suitability for each project based on its specific requirements!

‍

‍

State management

Effective state management is a vital aspect in the development process of React applications. To enhance the ease of handling and scalability of the state, it is important to adopt the practice of clearly distinguishing between client and server state.

The primary distinction between client and server state is that server state requires two sources of truth. Keeping server state fresh on the UI demands constant synchronization that can have significant performance implications and may result in a poor user experience. To address this challenge, it is essential to have a mechanism that can maintain a balance between showing stale data and updating it in the background as new data becomes available.

This pain point provides a foundation for a more sophisticated state management approach in React, as opposed to solely relying on Redux (and/or other similar state managers) for client and server state related events, particularly when handling issues such as cache management, background updates, and data merging scenarios that involve pagination or infinite scrolling become hard to manage.

‍

Our pick for client state management is Zustand

‍

Zustand is a popular client-side state management library that is known for its simplicity, performance, and seamless integration with React. With its minimal API, built-in TypeScript support, and lack of dependencies, Zustand is a great option for projects of all sizes and complexities.

‍

Redux vs. Zustand

‍

Redux follows the traditional Flux architecture, where there is a single store for the entire application state and actions are dispatched to modify the state. This can lead to a lot of boilerplate code, especially when there are a lot of actions and state updates.

Zustand, on the other hand, is an unopinionated library that uses Hooks and simplified flux principles to manage local state. Each component can have its own instance of state, and it can easily share state with other components. This can lead to a more intuitive and easier to reason about codebase.

In many cases, Zustand would be a better choice for client-side state management because of its simplicity and ease of use. It's especially useful for smaller and medium sized projects, where the complexity and the boilerplate of Redux may not be necessary.

‍

Scaling

‍

When it comes to large-scale applications, our experience indicates that Zustand can also serve them well if code quality standards are maintained. While Redux adopts a highly opinionated approach to state management, which can be advantageous in certain situations, Zustand provides a more streamlined and simplified implementation for developers who have a clear understanding of their desired client-side state management approach.

In the following basic example, you can see how easy it is to create a store without any providers and then use it with hooks in a component right away. You can create multiple stores in separate files (you can combine them if necessary) and then subscribe to them with the extracted hooks.

‍

Our pick for server state management is TanStack Query (React Query)

‍

React Query is a powerful and versatile library that has gained immense popularity among React developers for managing server state. With its intuitive and easy-to-use API, React Query makes it simple to fetch, cache, and manage data in a React application.

‍

Efficient Data Management

‍

React Query provides an efficient way to manage data by automatically fetching, caching, and updating data as needed. This makes it easy to keep the application up-to-date with the latest data from the server while also reducing the number of API requests, thereby improving the overall performance of the application.

‍

Flexibility and Scalability

‍

React Query is highly flexible and scalable, making it suitable for applications of all sizes. Whether we are building a simple website or a complex web application, React Query can easily handle the demands of the application and grow with it as the needs change. With its advanced caching and error handling capabilities, React Query is our go-to solution for managing server state in React applications.

This example illustrates how users can effortlessly generate fetching and posting functionalities using React Query. The library automatically manages loading and error states as well as caching and background refreshing, which can be customised to meet specific preferences. However, the default configuration serves as a strong basis for most common scenarios.

‍

Form management 

‍

Handling forms in React applications can be challenging due to the complex and dynamic nature of user inputs. React's approach to forms is based on state and event handling, which requires managing and updating multiple form elements, validation rules, and user interactions in real-time. Additionally, forms often involve complex logic such as conditional rendering, error handling, and data submission, making it difficult to maintain a clear and organised codebase.

‍

Our pick for form management is React Hook Form + Zod

‍

React Hook Form

‍

React Hook Form has a simple and intuitive API that makes it easy to create, manage, and validate forms. It is optimised for performance, making it a great choice for large-scale applications. The library is designed to minimise the number of re-renders and updates, which results in fast and smooth form interactions for users.

Developers can also take advantage of the library’s built-in TypeScript support to provide strong typing and improved code quality, while still using a powerful and easy-to-use form management library.

‍

Zod

‍

Zod is a highly flexible data validation library that can be used to validate any type of data, from simple values to complex objects. This means that developers can validate form data, API responses, and other types of data with ease and confidence. The library provides a simple and intuitive syntax for defining validation rules, making it straightforward for developers to ensure that their data meets the required criteria.

‍

Using them together

‍

As demonstrated in the example, integrating Zod into React Hook Form is a straightforward process. Zod will ensure that the data entered in the input fields meet all validation criteria before allowing form submission. Should any errors arise, built-in error messages corresponding to the provided scheme will be displayed to the user. These error messages can also be personalised to meet your specific needs.

By combining these two packages, developers can effortlessly validate form data and handle error messages, while also taking advantage of React Hook Form's performance optimisations and TypeScript support.

‍

We can define complex rules, conditions and custom validation functions to ensure that form data meets the required criteria and provide a more user-friendly experience for form users, meanwhile maintaining an exceptional developer experience as well.

‍

Building a design system

Building a design system in React applications can bring numerous benefits and enhance the overall user experience. Consistency is one of the key advantages, as it ensures that all elements of the user interface are cohesive and recognisable, making the product trustworthy. The design system also promotes reusability, making it easier to create new pages and features, reducing development time, and increasing efficiency.

‍

Our pick for building a design system is Tailwind + CVA

‍

Why Tailwind?

‍

Tailwind is a utility-first CSS framework that offers several benefits over other CSS solutions like SASS and styled-components. The first advantage is its speed, as Tailwind is designed to be fast and efficient, with a small size and optimised code that makes it quick to load and run in the browser. Tailwind also provides a lot of pre-configured classes that make it easy to style your HTML elements, allowing you to create a consistent design across your entire application.

Its customisation options also make it possible to create a unique look and feel while still taking advantage of the benefits of using a utility-first CSS framework. Additionally, Tailwind's syntax is straightforward and easy to learn, making it accessible to both beginner and experienced developers. With its responsiveness and ease of use, Tailwind is one of our preferred approaches to create high-quality, fast-loading applications.

‍

The role of CVA (Class Variance Authority)

‍

One of the common criticisms of Tailwind is the lack of custom class and style reusability, as the styles are applied directly to the HTML elements, without separate CSS files or modules. However, Tailwind's primary goal lies in providing an efficient, robust, and consistent approach to CSS styling. To address this issue, developers can adopt the use of CVA (Class Variance Authority).

With the help of CVA, you can conveniently create and develop a design system in React, based on the UI specifications provided by designers. CVA offers a type-safe methodology for creating a system of styled components that can be reused throughout the codebase, helping to overcome the challenges of reusing styles with Tailwind, avoiding cluttered and difficult-to-maintain code.

In the mentioned example, it is demonstrated how CVA and Tailwind collaborate effectively. A base styling can be defined which will be applied to each element instance, with the ability to create unique variants for various circumstances. The component can then be exported with type-safe parameters for improved code quality.

Upon completion of the Button component, it can be imported within the application, with the capability to specify the necessary intent to be utilised on the button element. In the absence of a specified variant, the default primary variant will be applied.

‍

If you are looking to leverage the efficiency of Tailwind but also want to preserve the reusability and transparency of CSS modules and classes, we highly recommend exploring this combination for your next project!

‍

Conclusion

‍

In conclusion, when it comes to React frontend development, the right packages and libraries can significantly reduce the time and effort required to build a performant, scalable, and maintainable application. In this article, we have presented our selection for the top packages/libraries that play a crucial role in state management, form management, and building a design system.

Zustand and React Query are our top picks for client-side and server-side state management, respectively, due to their simplicity, flexibility, and efficiency. Additionally, React Hook Form + Zod are our choices for form management because they simplify complex form handling, validation, and submission processes, making it easier to maintain a clear and organised codebase. In case of building a design system, ff.next opts for Tailwind - combined with the use of CVA (Class Variance Authority), as it is a utility-first CSS framework that offers several benefits over other CSS solutions like SASS and styled-components.

Remember to assess each package's suitability for your project based on its specific requirements! Happy coding! :) 

‍

‍

We hope that you found this blog post useful! Do not hesitate to follow us, so you won’t miss interesting stories in the future either. This article was provided by Péter Horváth. Melinda Havas, Head of Marketing & Business Development revised the content and formed it into this blog post.

¹Adam, J., 2022. The REACT framework (library) – A brief overview. [online] K&C. Available at: <https://kruschecompany.com/react-framework-library/> [Accessed 1 Apr. 2023].