fix: separate global hooks from app

[mmrrnn]

Description

Most of the hooks were place inside AppWrapper which caused constant rerender of the whole app when any of these hooks had side effects.

Case I also fixed that visualize the problem:
There was a hook

    const { setReleaseNotes, setIsAppUpdateAvailable } = useAppStateStore((state) => ({
        setReleaseNotes: state.setReleaseNotes,
        setIsAppUpdateAvailable: state.setIsAppUpdateAvailable,
    }));

Whenever any property of the AppStateStore changed, there was a check if the value had actually changed and the component needs to be rerendered. In this case, even though the setReleaseNotes and setIsAppUpdateAvailable references remained unchanged, we returned them together as an object, which reference actually is always different. As a result, the component was rerendered, even though no actual changes occurred.

Simple solution:

    const setReleaseNotes = useAppStateStore((state) => state.setReleaseNotes);
    const setIsAppUpdateAvailable = useAppStateStore((state) => state.setIsAppUpdateAvailable);

• The issue was that this hook was positioned at the top of the tree, causing a RERENDER OF THE ENTIRE APP.

These seemingly minor details can significantly impact overall performance. To mitigate this, I decided to encapsulate all of these hooks within separate component that don't render anything, ensuring that this issue does not happen again.

[shanimal08]

nice:D

[brianp]

Fantastic 👏🏻