Forem: Ajey N

A React Global State that can persist data too!

Ajey N — Thu, 20 Jun 2024 17:56:28 +0000

In my previous article, I introduced a powerful yet simple hook called useDbState that lets you persist state in your React components just like useState. But wait, there's more!

Introducing useDbState 2.0.0

Hold on to your hats because useDbState just got an upgrade! Now, with useDbState 2.0.0, you can use the same state across multiple components without any extra boilerplate code or wrappers. Yep, you read that right—global state management made easy!

How Does useDbState Work?

Before diving into the new features, let's quickly recap how useDbState works. This custom React hook stores and retrieves state using IndexedDB, making your state persistent across page reloads. It's as easy to use as useState but with superpowers!

Basic Usage

Here's a quick example:

import React from 'react';
import { useDbState } from 'use-db-state';

const Counter = () => {
  const [count, setCount] = useDbState('count', 0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

This code snippet stores the count state in IndexedDB under the key count, making it persistent across page reloads. Pretty cool, right?

New Features in useDbState 2.0.0

Global State Across Components

One of the standout features in the new version is the ability to share state across different components effortlessly. No more prop drilling or complex state management libraries. Just pure simplicity!

Example

Let's look at a practical example where we share user data across components:

Component A:

import React from 'react';
import { useDbState } from 'use-db-state';

const ComponentA = () => {
  const [user, setUser] = useDbState('user', { name: 'Alice', age: 25 });

  return (
    <div>
      <input
        type="text"
        value={user.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
      />
      <input
        type="number"
        value={user.age}
        onChange={(e) => setUser({ ...user, age: parseInt(e.target.value) })}
      />
    </div>
  );
};

export default ComponentA;

Component B:

import React from 'react';
import { useDbState } from 'use-db-state';

const ComponentB = () => {
  const [user] = useDbState('user');

  return (
    <div>
      <h1>{user?.name}</h1>
      <p>Age: {user?.age}</p>
    </div>
  );
};

export default ComponentB;

In this example, ComponentA and ComponentB share the user state. Any updates in ComponentA will automatically reflect in ComponentB, and vice versa.

Observe in ComponentB the useDbState hook is passed with only the key and no initilization. This will let you access the data stored in IndexedDB under the key user

How It Works

useDbState leverages IndexedDB to store state data persistently. When initialized, it fetches the value from IndexedDB. If the value exists, it sets the state to the fetched value; otherwise, it uses the provided default value. It also subscribes to changes in the state associated with the key, ensuring all components using the same key are synchronized.

API

useDbState

const [value, setValue] = useDbState(key: string, defaultValue: any, dbName?: string = 'userDatabase', storeName?: string = 'userData');

Parameters:

key (string): The key under which the value is stored in IndexedDB.
defaultValue (any): Initial value of the state. You can make this undefined when you need to read already stored data under the key.
dbName (string, optional): The name of the IndexedDB database. Defaults to 'userDatabase'.
storeName (string, optional): The name of the IndexedDB object store. Defaults to 'userData'.

Returns:

value (any): The current state value.
setValue (function): A function to update the state value.

More Practical Examples

Storing User Preferences

You can use useDbState to store user preferences like theme settings. You can change the theme from any component in your app and browser will remember what you set the next time you open your app:

import React from 'react';
import { useDbState } from 'use-db-state';

const ThemeToggle = () => {
  const [theme, setTheme] = useDbState('theme', 'light');

  return (
    <div>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <p>Current theme: {theme}</p>
    </div>
  );
};

export default ThemeToggle;

Managing a Shopping Cart

Easily manage a shopping cart across different components:

import React from 'react';
import { useDbState } from 'use-db-state';

const AddToCart = ({ item }) => {
  const [cart, setCart] = useDbState('cart', []);

  const addToCart = () => {
    setCart([...cart, item]);
  };

  return <button onClick={addToCart}>Add to Cart</button>;
};

const Cart = () => {
  const [cart] = useDbState('cart');

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export { AddToCart, Cart };

Conclusion

The useDbState hook could be a game-changer for your React state management. It simplifies persistence with IndexedDB and introduces a seamless way to share state across components without extra hassle. With these new features, managing global state in your React apps has never been easier.

So, go ahead and try out useDbState in your projects. Comment below if you find any interesting application or not-so-interesting bugs 😅. Would love to colloborate with you to make the hook better and more useful! 💪

Happy coding! 🚀

Feel free to reach out if you have any questions or need further assistance. You can find the full documentation on my GitHub repository.

If you found this article helpful, share it with your fellow developers and spread the word about use-db-state!

You can follow me on github and Linkedin

Persist your React State in the Browser

Ajey N — Tue, 11 Jun 2024 18:15:41 +0000

The Problem

Have you ever wanted to persist your React state in the browser? Have you ever created a long form and wished its data wouldn't vanish when you refresh the page before you submit it?

well, I have too.

Brainstorming solutions

I've been thinking about this for a while.
Basically, you have to store the form data in the browser. There are a few ways to do this. There is localStorage, sessionStorage, and cookies. These work great for small amounts of data and simple forms. I wanted to build something that is robust, can handle variety of data, and as simple as using useState hook in React.

That's when I came across IndexedDB.

Did you know the browser has its own database? I mean not key:value pairs like localStorage, but an actual database that you can store and query data from!!

IndexedDB

This is what the official MDN doc says about IndexedDB:

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

In simple terms, you can store large amounts of complex data and also query it quickly and efficiently just like you would with a database. Web storage would store small amounts (~10MB) of data in the form of strings upon which you cannot query.

And guess what? You can even store files and blobs in IndexedDB!

The Solution

If you look at the IndexedDB API documentation, you will see that it is fairly complex to setup and use. I wanted something that is as simple as using useState hook. Infact I want it to have same syntax and same ease of use as useState hook.

So I started building a simple library that will help you store and query your data in IndexedDB just as easily as you would with useState.

That's how use-db-state was born.

Introducing use-db-state

use-db-state is a custom React hook that allows you to persist state in the browser using IndexedDB. It handles all the complexity of IndexedDB, giving you a simple and familiar interface to work with.

Let's see how you can use it.

Installation

First, you need to install the library via npm:

npm install use-db-state

Usage

Here's a simple example to get you started:

please go through the documentation for detailed explaination of the parameters

import React from 'react';
import { useDbState } from 'use-db-state';

const SimpleForm = () => {
  const [value, setValue] = useDbState('formInput', '');

  return (
    <div>
      <h1>Persisted Form</h1>
      <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
        placeholder="Type something..." 
      />
      <p>Persisted Value: {value}</p>
    </div>
  );
};

export default SimpleForm;

And just like that your state will persist even if you refresh the page!
Your state is now stored in IndexedDB. If you want to see where your data is stored, open your browser's developer console, go to Applications tab, and on the left panel look for IndexedDB! Click on it and you should see your data inside.

Going Deeper

But wait, there's more! use-db-state also comes with a handy hook called useDbKeyRemover. This hook allows you to remove specific keys from IndexedDB.

Why is useDbKeyRemover Important?

When dealing with persisted state, there are situations where you may need to clean up or remove specific entries from your IndexedDB store. For instance:

Form Resets: After submitting a form, you might want to clear the saved input values to avoid stale data when the user revisits the form.
User Logout: On user logout, you might want to clear user-specific data from IndexedDB to ensure privacy and data security.
Data Updates: Sometimes, you need to remove outdated data to make way for new, updated data. By using useDbKeyRemover, you can easily remove specific keys without having to deal with the low-level complexities of IndexedDB.

Here's a more complex example demonstrating both useDbState and useDbKeyRemover:
please go through the documentation for detailed explaination of the parameters

Example: Form with Key Removal

import React from 'react';
import { useDbState, useDbKeyRemover } from 'use-db-state';

const FormWithKeyRemoval = () => {
  const [name, setName] = useDbState('name', '');
  const [email, setEmail] = useDbState('email', '');
  const removeKey = useDbKeyRemover();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', { name, email });
    setName('');
    setEmail('');
    removeKey('name');
    removeKey('email');
  };

  return (
    <div>
      <h1>Form with Key Removal</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Name:
            <input 
              type="text" 
              value={name} 
              onChange={(e) => setName(e.target.value)} 
            />
          </label>
        </div>
        <div>
          <label>
            Email:
            <input 
              type="email" 
              value={email} 
              onChange={(e) => setEmail(e.target.value)} 
            />
          </label>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default FormWithKeyRemoval;

When to Use use-db-state

use-db-state is perfect for scenarios where you need to persist state across page reloads or browser sessions. Some common use cases include:

Forms: Prevent users from losing their input data in case they accidentally refresh the page.
User Preferences: Persist theme, language, or other user settings.
Shopping Carts: Maintain cart contents between sessions.
Complex Forms: Save progress in multi-step forms.
And much more!!

Conclusion

Persisting state in the browser doesn't have to be complex. With use-db-state, you can leverage the power of IndexedDB with the simplicity of useState. This library abstracts away the complexities, allowing you to focus on building great user experiences.

Give use-db-state a try in your next project and make state persistence a breeze!

Happy coding!

Feel free to reach out if you have any questions or need further assistance. You can find the full documentation on my GitHub repository.

If you found this article helpful, share it with your fellow developers and spread the word about use-db-state!

You can follow me on github and Linkedin