State management in a nutshell 📘

You are trying to choose a state management library for your React project. But there are so many of them (Redux Toolkit, Zustand, Valtio, Jotai). Which one should you use? Do you even need a state management library in the first place? Isn't React context enough? What about data fetching libraries like Tanstack React Query or SWR? Arghhhh

Figuring all of this out will take you ages. Your React project will turn into a buggy mess while you figure it out. But what if you can learn everything you need to get started in 1 hour? What if, in 1 hour, you can have the perfect strategy for managing state that will make your React project a joy to work with?

This is what State management in a nutshell can help you with. It will guide you through the confusing world of state management in React to help you decide which path to take.

About me

My name is Prabashwara Seneviratne and I am a senior frontend developer and the author of Frontend undefined. I have been working with React for over 9 years and I have worked with all kinds of state management solutions for React during that time.

State management was more straightforward when I first started with React since there weren't many options. Everyone used Redux. But then React Context and React Hooks arrived and state management got a lot more confusing.

I wanted to create a guide to help new React devs better understand the options and the common mistakes around state management. Poor state management was a common problem on many React projects that I joined midway which were torture to work with. So I wanted to put everything I know about state management in one place and that is State management in a nutshell.

What is state management in a nutshell?

State management in a nutshell is a focused guide that will walk you through several options for managing state in a React. You will learn how the primitives provided by React (React State, React Context) fall short and how external libraries can help you overcome these shortcomings.

The term "state management" was historically used for libraries that work directly with state values such as Redux and MobX. But with the arrival of React Hooks, several libraries emerged that removed the need to work with state directly. Data fetching libraries like Tanstack React Query, form libraries like React Hook Form and routing libraries like React Router started being the norm in new React projects.

The community does not refer to these libraries as state management libraries but these libraries still solve the same problems of working with state in React which is why State management in a nutshell will walk you through what they can do and how they can work together.

My goal with State management in a nutshell is to give you all the information you need so that you can manage state well in React. Poor state management leads to bugs, poor performance and frustration as components spiral out of control with endless useEffect hooks and unexpected re-renders. State management in a nutshell can help you get back in control and make your project a joy to work with.

Contents

• Great state management for the win
• Building faster with libraries
  • Data fetching libraries (Tanstack React Query, RTK Query)
  • Form libraries (React Hook Form)
  • Routing libraries (React Router)
  • The pitfalls of using libraries
• Staying in control with manual state management
  • When do you need manual state management?
  • Managing local and global state
  • The pitfalls of React State and React Context
  • State management libraries (Redux Toolkit, Zustand, Valtio, Jotai, XState)
  • Choosing a state management library
• The perfect state management strategy for your project

Buy it now

Have any questions?

Please write me at nutshell@frontendundefined.com.