`useEffect` atomize side-effects

currently the entire `state` value changes when updating or changing even a single property,
this causes a re-render even when it's not needed and triggeres `useEffect` calls that end up triggering un-controlled side effects.

Need a solution for this by researching value caching or creating a custom `useEffect` to work with the state updates.
Not sure yet, needs discussion and more insight.

Start by reviewing the set-state-hook implementation and how state updates interact with React's useEffect. Compare the current whole-state updates with value caching and the proposed custom useEffect approach. The issue is exploratory, so a solution and completion criteria still need discussion before implementation.

Written by the indexing model from the issue text.