Storing User Preferences in React

This tutorial was originally posted here

Allowing users to select preferences is great, if they stick around...

The preferences, that is. User retention is an entirely different conversation. But as far as persisting a user's data goes, the approach is surprisingly straight forward.

Be Safe

When storing a user's data, it is important to keep security in mind. Don't save things like a user's password or a secret key where unwanted intrusions may occur. For the purposes of this demonstration, we will only be storing the user's theme preference.

Getting Started

In the last tutorial we learned how to create a dark mode toggle button:

src/App.js

import './App.css';
import { useEffect, useState } from 'react';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    if (darkMode) {
      document.body.classList.add('dark');
    }
    else {
      document.body.classList.remove('dark');
    }
  }, [darkMode]);

  return (
    <div className="App">
      <h1>{darkMode ? 'Dark Mode' : 'Light Mode'}</h1>
      <p>This is a test</p>
      <button
        className="dark-mode-toggle"
        onClick={() => {
          setDarkMode(!darkMode);
        }}>
        <div className="dark-mode-slider" />
      </button>
    </div>
  );
}

export default App;

src/App.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.App {
  height: 100vh;
  width: auto;
  text-align: center;
  font-size: 5em;
  color: #2e3440;
  background-color: #d8dee9;
  transition: all 0.2s ease;
}
.dark,
.dark .App {
  color: #d8dee9;
  background-color: #2e3440;
  transition: all 0.2s ease;
}

/* Button Styles */

.dark-mode-toggle {
  width: 80px;
  height: 36px;
  border-radius: 50px;
  top: 0;
  left: 0;
}
.dark-mode-toggle svg {
  fill: #000;
}
.dark-mode-slider {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #2e3440;
  display: flex;
  position: relative;
  transform: translateX(0px);
  transition: all 0.2s ease;
}

.dark .dark-mode-slider {
  transform: translateX(45px);
}

Where did it go?

Lets take a closer look at our functionality. When we click the button, our styling toggles between light and dark mode, awesome! If you switch to dark mode and refresh, you may notice you're right back to light mode, as that is our default setting.

Making it stick

Lets fix this behavior by storing our preference using the localStorage api

We'll need to update our useEffect hook from it's current state:

  useEffect(() => {
    if (darkMode) {
      document.body.classList.add('dark');
    }
    else {
      document.body.classList.remove('dark');
    }
  }, [darkMode]);

to the following:

useEffect(() => {
    if (darkMode) {
      localStorage.setItem('prefersDarkMode', 'true');
      document.body.classList.add('dark');
    }
    else {
      localStorage.setItem('prefersDarkMode', 'false');
      document.body.classList.remove('dark');
    }
  }, [darkMode]);

In this change, we've told our application to store a key value pair to our browser, but you may have noticed we are only setting the item and not using it to control our state. To accomplish this, we need to add another useEffect hook above the one we just edited, it should look like this:

  useEffect(() => {
    const storedPreference = localStorage.getItem('darkModePreference');
    if (storedPreference) {
      setDarkMode(JSON.parse(storedPreference));
    }
  }, []);

Lets take a closer look. We are using the getItem method to retrieve the value of the key we set earlier, and using the JSON.parse method to convert the string value to a boolean.
We're leaving the dependency array empty, because we only want this to run on the initial mount of our application. With this change complete, we are now able to refresh our page, and our theme preference is loaded without us having to toggle the button.

Saving some time

In some cases, users will already have certain preferences available from their device, and we can use those to set our initial state. In this case, we can use the matchMedia api to check if the user has a theme preference set in their device.To accomplish this, we can edit the previous useEffect hook to look like this:

    useEffect(() => {
        const storedPreference = localStorage.getItem('darkModePreference');
        if (storedPreference) {
        setDarkMode(JSON.parse(storedPreference));
        }
        else {
        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setDarkMode(prefersDarkMode);
        }
    }, []);

We're using an if statement to check if the user has a preference set in their device. If they do, we'll set the state to the value of the preference. If not, we'll use the matchMedia api to check if the user prefers dark mode. If they do, we'll set the state to using the prefers-color-scheme: dark media query. This will return a boolean value, and we'll set prefersDarkMode to that value. This will trigger our initial useEffect hook to run, and update our application to match the user's preference.

This is all it takes to persist data in the browser. This was just a small example, but many developers find this useful for storing a multitude of non-sensitive data, without having to make expensive calls to the server among many other creative uses.