Simplify State Management in React with Jotai

#jotai #react #webdev #javascript

In this blog post, we will explore a powerful library called Jotai that can greatly assist with state management in React. If you've worked with React before, you're probably familiar with using local state or reducers within your components.

While this approach works well for managing state within a single component, it becomes less efficient when you need to share state between multiple components at different levels of your application hierarchy.

Traditionally, React developers have relied on techniques like parent-child communication or React context to share global state across components.

However, these methods have their drawbacks, such as increased complexity and excessive re-renders. Enter Jotai, a library that provides a simpler and more scalable solution for sharing state without the need for Redux or complex provider setups.

Let's dive into some examples to better understand how Jotai can benefit our state management workflow.

Example 1: Creating and Using Atoms

Atoms are the core building blocks of Jotai. They represent individual pieces of state that can be accessed and modified throughout your application. Let's say we want to manage the theme of our application as a global state. With Jotai, we can create a themeAtom to accomplish this:

import { atom, useAtom } from 'Jotai';

const themeAtom = atom('light');

function App() {
  const [theme, setTheme] = useAtom(themeAtom);

  return (
    <div>
      <p>Current theme: {theme}</p>
      {/* ... */}
    </div>
  );
}

In the above example, we create a new themeAtom using the atom() function provided by Jotai. We set its initial value to 'light'. Then, in our App component, we use the useAtom() hook to access the state and the corresponding setter function. Now, we can render and interact with the theme state throughout our application without passing it down through props or context.

Example 2: Computed Properties

Jotai also allows us to derive new atoms based on existing ones, similar to computed properties. Let's say we want to define a buttonColorAtom that depends on the value of our themeAtom. Here's how we can achieve that:

const buttonColorAtom = atom((get) => {
  const theme = get(themeAtom);
  return theme === 'light' ? 'gray' : 'white';
});

function MyApp() {
  // ...
  const [buttonColor] = useAtom(buttonColorAtom);
  // ...

  return (
    <div>
      {/* ... */}
      <button style={{ background: buttonColor }}>Toggle Theme</button>
      {/* ... */}
    </div>
  );
}

In this example, we define a new buttonColorAtom using the atom() function. We pass a function that receives the get parameter, which can be used to access the value of other atoms. Inside the function, we check the value of our themeAtom and determine the appropriate button color based on it. Now, anytime the theme changes, the buttonColorAtom will automatically update as well.

These examples demonstrate the simplicity and power of Jotai in managing global state without the need for complex React context or Redux setups. However, it's important to note that it's recommended to keep atoms small and focused, rather than creating a single large object to represent all your state. This helps minimize unnecessary re-renders and improves performance.

Conclusion

Jotai provides a lightweight yet powerful solution for state management in React applications. By using atoms and hooks, developers can easily share and update state across components without the boilerplate of Redux or the overhead of complex provider structures. Furthermore, Jotai integrates seamlessly with other libraries like React Query for handling server-state and API data synchronization.

Give Jotai a try in your next React project and see how it simplifies your state management workflow!

I hope you find this blog post helpful.

Happy Coding!

Top comments (4)

Dusan Petkovic • Dec 1 '23

Seams like it promotes creating multiple small reactive states rather than on huge global state.

At this point it seams to be just personal preference, as long as the state manager is well maintained and not too complicated

Bhavesh Yadav • Dec 2 '23

Yup, in the end its all about personal preference but my main point for this blog is that you don't always need to pull out your big guns like redux, you have plenty of options available today.