RFC: useGlobalState

[mushan0x0]

This is the global state implemented using batch updates. The usage is similar to useState, simpler than context, and the usage scenarios are different.

Here is my implementation and usage example.

[Zachiah]

Why not have the keys be Symbols? That would mean you basically couldn't conflict. The downside is that you would have to import the Symbol from another module or make a wrapper hook and import it, however, I think this is really a plus not a downside as it makes it so much clearer where the state sharing is

[iMrDJAi]

I had a similar but a slightly different approach. Check my implementation of useSync().

Do you think that it is worth creating an RFC for?

[wmzy]

See react-use createGlobalState.

[iMrDJAi]

@wmzy You'll still have to import the hook into different components in order to use it, which is not ideal. A subscription based one with a unique identifier (either a string or a symbol) will be way handier and will cause less headache when trying to remember which hook to import and where to import it from.

[bennobuilder]

Libraries like feature-state, jotai, and nanostores already provide implementations for creating global states.

How would useGlobalState() differ?

Example using feature-state (< 1KB minified)

store/tasks.ts

import { createState } from 'feature-state';

export const $tasks = createState<Task[]>([]);

export function addTask(task: Task) {
    $tasks.set([...$tasks.get(), task]);
}

components/Tasks.tsx

import { useGlobalState } from 'feature-state-react';
import { $tasks } from '../store/tasks';

export const Tasks = () => {
    const tasks = useGlobalState($tasks);

    return (
        <ul>
            {tasks.map(task => <li key={task.id}>{task.title}</li>)}
        </ul>
    );
}

[iMrDJAi]

@bennoinbeta And why going for third party solutions if React already had this built-in? Given how crucial this is and how simple it is to implement, it makes sense to have it included in core.

[sarath263]

I can suggest another way, like a selector ( a bit looks like useSelector in redux)

const [value, setGlobalState] = useGlobalState(s => s.name);

Returns: [value, setGlobalState]

• value: The current value of the selected slice. undefined if the slice doesn't exist.
• setGlobalState: Function to update the global state by merging the provided object.

Note: setGlobalState merges the provided object into the global state. It can update any part of the state, not just the selected slice.

I have a full implementation of this. Since most people agreed that we need a useGlobalState hook for sure, I believe we can immediately decide on an implementation plan and do it ASAP.

[vezaynk]

This seems unnecessary given that you can simply

1. write your own state management abstraction
2. put an instance of into a context
3. access via context
4. query it exactly as you do now

Indeed, Zustand+Context achives exactly that, so you don't even need to write it yourself: https://tkdodo.eu/blog/zustand-and-react-context

[sarath263]

Isn't it cool to use a global state just like useState

const [name, setGlobalState] = useGlobalState(s => s.name);

Set name to global state:
setGlobalState({name:"Kevin"})

Simple and humble.. right?

The problem with context is that it is not that optimized on render control. Update one value in context, all the components which uses any other part of context too will re render.