How do I manage States in React Apps?

In this article, Let's go through, how do i manage local, global states When building react applications.

I try to follow up with, keep the states as low as possible,

App Level State:

1. Local State
2. Lift State
3. Global State

1. Local State:

Example:

const App = () => {
    const [theme, setTheme] = useState("light");

    const pickTheme = theme === 'light' ? 'dark' : 'light';

    const toggleTheme = () => {
        setTheme(pickTheme)
    }

    return (
        <div>
            <h4>Theme: {theme}</h4>
            <button onClick={toggleTheme}>Change</button>
        </div>
    )
}

2. Lift State:

when components grows like 2, 3 levels deeper, it is fine..

Example:

function App() {
    const [theme, setTheme] = useState("light");
    const pickTheme = theme === 'light' ? 'dark' : 'light';
    const toggleTheme = () => {
        setTheme(pickTheme)
    }

    return <DirectChild theme={theme} toggleTheme={toggleTheme}  />
}

function DirectChild({ theme, toggleTheme }) {
    return <div>
        <div>Hello Child</div>
        <DeeperChild theme={theme} toggleTheme={toggleTheme} />
    </div>
}

function DeeperChild({ theme, toggleTheme }) {
    return <div>
        <h2>Hello Child</h2>
        <h4>Theme: {theme}</h4>
        <button onClick={toggleTheme}>Change Theme</button>
    <div>
}

But when components nested with N level deep, will lead to prop drilling, which causes performance issues, in those cases, we should think Global State Management..

3. Global State:

When dealing with Global States, I try to follow up with React Context API hooks, Let us go through, how to integrate with an example.

But When deal with Global State Management, can use any 3rd party libraries most comfortable with like Redux, Mobx, Recoil etc.. or just stick with useState hook..

Example:

import React from 'react';
const MyContext = React.createContext({});
const MyProvider = ({ children }) => {
    const [theme, setTheme] = React.useState('light');
    const nextTheme = theme === 'light' ? 'dark' : 'light';
    const value = {
        theme,
        nextTheme,
        toggleTheme: () => {
            setTheme(nextTheme);
        }
    }

    return <MyContext.Provider value={value}>{children}</MyContext.Provider>
}

function App() {
    return <MyProvider>
        <DirectChild />
    </MyProvider>
}

const DirectChild = () => {
    return <DeeperChild />
};

const DeeperChild = () => {
    const { nextTheme, toggleTheme } = React.useContext(MyContext);

    return <div>
            <p>Theme : {nextTheme}</p>
            <button onClick={toggleTheme}>Change Theme</button>
    </div>
}

External Data Fetching:

Often I try to use with Next.js's SWR or React Query libraries, which are powerful with many features.
on GraphQl fetch, can use Apollo Client.

Hoping this article have given some idea on managing states with React applications.

Thanks.

Comments

[Ryan Jentzsch]

A really good hook based global state library is github.com/CharlesStover/reactn

ReactN is an extension of React that includes global state management. It treats global state as if it were built into React itself -- without the boilerplate of third party libraries.

[jzombie]

I'm a big fan of using the provider contexts. Glad you mentioned it.