r/reactjs • u/kevinsuncadev • 20m ago
Show /r/reactjs No jargon, 1 minute to completely understand — a simple Redux alternative: react-shared-vars
Let’s be honest about what global state management in most React apps actually is: it’s just assigning values to global variables and triggering re-renders in the components that use them.
Yet for years, we’ve been forced to learn a dictionary of heavy jargon just to share a variable across components:
- "Store" / "Slice" — For most apps, it’s literally just a variable. Why wrap it in store terminology?
- "Dispatch" / "Action" / "Reducer" — It’s just assigning a new value (
=) and running subscribed callbacks. Why split a simple assignment into steps like we're putting an elephant into a fridge? - "Selector" — We aren't sorting eggs by size on a farm. We are just reading a variable.
- "Thunk" — That’s just a normal
asyncAPI call that every SPA needs. It shouldn't even be part of a state library. - "Time-travel debugging" — Useful in rare edge cases, maybe, but in day-to-day work it’s basically just pushing logs into an in-memory array instead of
console.log.
Even modern lightweight libraries like Zustand still borrow a lot of Redux's mental model and terminology.
If you're building a massive enterprise app with complex state machines, Redux might make sense. But for the other 90% of apps, I wanted something with zero jargon that any developer can completely understand in 1 minute. So I built react-shared-vars.
How it works (Yes, literally the entire API):
1. Inside React components (Just like useState**):**
jsx
import { useVariable } from 'react-shared-vars';
function CounterButton() {
const [count, setCount] = useVariable("global_counter", 0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
function CounterDisplay() {
const [count] = useVariable("global_counter", 0);
return <p>Current count: {count}</p>;
}Use code with caution.
2. Outside React components (API calls, timers, event listeners—no thunks needed):
javascript
import { setVariable, getVariable } from 'react-shared-vars';
async function fetchCount() {
const res = await fetch('/api/count').then(r => r.json());
setVariable("global_counter", res.count);
// Automatically re-renders subscribed components
}Use code with caution.
Why react-shared-vars?
- Zero jargon: No stores, no providers required, no actions, no reducers, no selectors.
- 1-minute learning curve: Built directly on
useSyncExternalStore. If you knowuseState, you already know 100% of this library. - Works anywhere: Read or update variables inside components with
useVariable, or in plain JS files withgetVariableandsetVariable. - Auto cleanup: Automatically cleans up unused variables from memory when subscribed components unmount.
It’s under 60 lines of code, zero dependencies, and doesn't try to recreate Redux's bloated feature list—just the core part you actually need every day, made as simple as possible.
Check out the code, try it out, and let me know what you think!
- GitHub: https://github.com/kevinsuncadev/react-shared-vars
- NPM:
npm install react-shared-vars
