Hey there! If you're working with React and tired of passing props everywhere or dealing with messy state, Jotai might be your new best friend. I've been messing around with it lately and found it super easy to handle global state. In this blog, I'll walk you through setting it up, building a basic counter app, and adding a dependent state to make it more fun. Let's dive in!

Why Jotai?

Jotai is a lightweight state management library for React. It's great because it keeps things simple, no heavy setup like Redux. You use "atoms" to store state, and they work anywhere in your app. Plus, it's fast and lets you create dependent states, which is pretty cool. I've been using it to clean up my projects, and it's been a game-changer.

Installation

First, you need to get Jotai into your project. If you’re starting fresh, set up a React app with Create React App:

npx create-react-app my-jotai-app
cd my-jotai-app

Then, install Jotai using npm or yarn:

npm install jotai
# or
yarn add jotai

That’s it! You’re ready to start coding.

Building a Basic Counter App

Step 1: Create an Atom

Atoms are the heart of Jotai. They hold your state. In counter.js, add this:

import { atom } from 'jotai';

export const countAtom = atom(0);

This creates a countAtom starting at 0. Think of it like a global variable you can update anywhere.

Step 2: Build the Counter Component

Now, let’s use this atom in a component. Update App.js like this:

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './counter';

function App() {
  const [count, setCount] = useAtom(countAtom);

  return (
    
      Counter: {count}
       setCount(count + 1)}>Increment
       setCount(count - 1)}>Decrement
    
  );
}

export default App;
  • useAtom gives you the current value (count) and a way to update it (setCount).
  • The buttons increase or decrease the count when clicked.

Run your app with npm start, and you’ll see a counter you can play with!

Adding a Dependent State

Now, let’s make it more interesting. What if we want another counter that’s always double the first one? Jotai makes this easy with derived atoms.

Step 3: Create a Derived Atom

Back in counter.js, add a new atom that depends on countAtom:

import { atom } from 'jotai';

export const countAtom = atom(0);
export const doubleCountAtom = atom((get) => get(countAtom) * 2);
  • doubleCountAtom uses a function to "get" the value of countAtom and multiplies it by 2.
  • This is a derived state—it updates automatically when countAtom changes.

Step 4: Display the Double Counter

Update App.js to show the double count:

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom, doubleCountAtom } from './counter';

function App() {
  const [count, setCount] = useAtom(countAtom);
  const [doubleCount] = useAtom(doubleCountAtom); // We only need to read this

  return (
    
      Counter: {count}
       setCount(count + 1)}>Increment
       setCount(count - 1)}>Decrement
      Double Counter: {doubleCount}
    
  );
}

export default App;

Now, when you click "Increment," the first counter goes up by 1, and the double counter jumps by 2. Try it out—it’s magic!

Tips to Get Better

  • Play Around: Try adding more atoms, like a totalCount that adds the counter and double counter.
  • Check Docs: Look at jotai.org for stuff like atom families or async atoms.
  • Build Something: Make a to-do list or a small game to practice.

Wrap Up

Jotai is awesome for keeping your React state clean and global. With just a few lines, you can build a counter and link states together. I’ve been using it in my side projects, and it’s made things so much smoother. Give it a shot, and let me know how it goes in the comments!

If you liked this, follow me for more React tips, or share your own Jotai projects. Happy coding!