eventsync is a React-compatible global state management library powered by DOM event streams. It solves the React Context re-render problem and makes global state simple, efficient, and precise.
Curious why this matters? Read our blog: Why React Context Causes Unnecessary Rerenders (and how eventsync fixes it)
npm install react-eventsync
import { initGlobalState } from 'react-eventsync';
initGlobalState({
counter: 0,
user: { name: '', email: '' }
});
import { useGlobalState, setGlobalState } from 'react-eventsync';
const [{ user_name, counter }, { setUser_name, setCounter }] = useGlobalState([
'user.name',
'counter'
]);
setGlobalState('user.name', 'Alice');
useGlobalState(paths: string[])
— Subscribe to one or more state fields by dot-path. Returns [values, setters]
.setGlobalState(path: string, value: any)
— Programmatically update state at the specified path.Q: How is this different from React Context? A: Context causes all consumers to re-render on any value change. eventsync only re-renders components that subscribe to the changed state field.
Q: Is it safe for deep state? A: Yes! Subscribe to any nested field using dot-paths (e.g., ‘user.name’).
Q: Is it fast? A: Yes. Updates are broadcast via DOM events and only relevant components update.
For more, see the Getting Started guide or the blog post.