eventSync

eventsync Documentation

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.


Why eventsync?

Curious why this matters? Read our blog: Why React Context Causes Unnecessary Rerenders (and how eventsync fixes it)


Quick Start

1. Install

npm install react-eventsync

2. Initialize Global State

import { initGlobalState } from 'react-eventsync';

initGlobalState({
  counter: 0,
  user: { name: '', email: '' }
});

3. Use State in Components

import { useGlobalState, setGlobalState } from 'react-eventsync';

const [{ user_name, counter }, { setUser_name, setCounter }] = useGlobalState([
  'user.name',
  'counter'
]);

setGlobalState('user.name', 'Alice');

Learn More


FAQ

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.