This content originally appeared on DEV Community and was authored by Ragaeeb
After years of frustration with React’s immutability rules—constantly spreading state just to update a nested property—I decided enough was enough. The code was cluttered, error-prone, and hard to read.
So, I built useMutableState(), a tiny React hook that leverages the Proxy pattern to make deep state updates effortless. No more spreading—just mutate directly, and React handles the rest!
Turn:
const [state, setState] = useState({
level1: { level2: { level3: { level4: { count: 0 } } } },
});
const increment = () => {
setState((prev) => ({
...prev,
level1: {
...prev.level1,
level2: {
...prev.level1.level2,
level3: {
...prev.level1.level2.level3,
level4: {
...prev.level1.level2.level3.level4,
count: prev.level1.level2.level3.level4.count + 1,
},
},
},
},
}));
};
return (
<div>
<h3>Count: {state.level1.level2.level3.level4.count}</h3>
<button onClick={increment}>Increment</button>
</div>
);
into:
const state = useMutableState({
level1: { level2: { level3: { level4: { count: 0 } } } },
});
return (
<div>
<h3>Count: {state.level1.level2.level3.level4.count}</h3>
<button onClick={() => state.level1.level2.level3.level4.count++}>Increment</button>
</div>
);
đź”— See it in action: Demo
đź’» Check out the code: Repo
Bug reports are welcome! 🚀
This content originally appeared on DEV Community and was authored by Ragaeeb
Ragaeeb | Sciencx (2025-02-18T21:59:54+00:00) 🚀 useMutableState: Tiny state management hook to easily edit deeply nested properties. Retrieved from https://www.scien.cx/2025/02/18/%f0%9f%9a%80-usemutablestate-tiny-state-management-hook-to-easily-edit-deeply-nested-properties/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.