If you’ve ever used React Context for global state management, you probably ran into this: updating one small value causes your entire app to rerender. Annoying, right? Especially when only one component needed the update.
Let’s break down why this happens and how eventsync fixes it using a simple, event-driven approach.
The Problem: Context Rerenders Everything
React Context is great for sharing global state, but it comes with a hidden cost. Imagine this setup:
context.tsx
import React, { createContext, useContext, useState } from 'react';
const AppContext = createContext(null);
export const AppProvider = ({ children }) => {
const [counter, setCounter] = useState(0);
const [user, setUser] = useState({ name: '', email: '' });
return (
<AppContext.Provider value={{ counter, setCounter, user, setUser }}>
{children}
</AppContext.Provider>
);
};
export const useAppContext = () => useContext(AppContext);
Now, two components that use different parts of the state:
Counter.tsx
import { useAppContext } from './context';
const Counter = () => {
const { counter, setCounter } = useAppContext();
console.info('Counter rerendered');
return (
<button onClick={() => setCounter(counter + 1)}>{counter}</button>
);
};
UserName.tsx
import { useAppContext } from './context';
const UserName = () => {
const { user } = useAppContext();
console.info('UserName rerendered');
return <div>{user.name}</div>;
};
If you click the Counter button, both Counter and UserName rerender. But why?
React Context triggers a rerender for all consumers whenever the context value changes, even if the part they care about stayed the same.
This means:
✅ More rerenders than necessary
✅ Performance bottlenecks in large apps
✅ Frustrating debugging sessions
The Solution: eventsync
eventsync gives you global state without the Context rerender headaches. It uses good old DOM events to notify only the components that care.
Here’s the same example rewritten with eventsync:
install it from npm
npm install eventsync
App.tsx
import { initGlobalState } from 'eventsync';
import Counter from './Counter';
import UserName from './UserName';
initGlobalState({
counter: 0,
user: { name: '', email: '' }
});
function App() {
return (
<>
<Counter />
<UserName />
</>
);
}
Counter.tsx
import { useGlobalState } from 'eventsync';
const Counter = () => {
const [{ counter }, { setCounter }] = useGlobalState(["counter"]);
console.info('Counter rerendered');
return (
<button onClick={() => setCounter(counter + 1)}>{counter}</button>
);
};
UserName.tsx
import { useGlobalState } from 'eventsync';
const UserName = () => {
const [username] = useGlobalState('user.name');
console.info('UserName rerendered');
return <div>{username}</div>;
};
With eventsync:
✅ Updating counter only rerenders Counter
✅ UserName stays untouched
✅ No need to split context or build complex selectors
Why Use eventsync?
Fine-grained updates: Components subscribe to specific state fields
Cleaner code: No boilerplate splitting context for different consumers
Better performance: Fewer unnecessary renders
Zero context dependency: eventsync uses native DOM events under the hood
Final Thoughts
Tired of your whole UI rerendering when only one value changes? Give react-eventsync a try.
You get global state with precise, efficient updates, powered by DOM events. It’s a simple drop-in tool that keeps your app performant without extra complexity.
Curious to explore more? Check out the Getting Started guide and level up your global state management.
The project is open-source and available on GitHub:
https://github.com/Lutif/eventSync
If you find it useful, please give it a star
Want to follow my work? Follow on github to support my work. lutif
