createChromeStorageStateHookLocal returns initial value first then the persisted one

[Othmanosx]

I've been using createChromeStorageStateHookLocal for some time now for my Chrome extension but I noticed an annoying rerender issue that I couldn't debug, for some reason, the hook always returns the initial values on the first render then rerenders again with the persisted values.

The expected behavior:
on the first render, the hook should return the persisted values if they exist and fallback to the initial values, and should not render twice.

How I'm using it right now:

const SETTINGS_KEY = 'settings';
const INITIAL_VALUE: Settings = {
  isDark: false,
};

export const useSettingsStore = createChromeStorageStateHookLocal(SETTINGS_KEY, INITIAL_VALUE);

    const [{ isDark }] = useSettingsStore()

    // assuming that the persisted value of isDark is "true"
    console.log(isDark)  // 1st render: false, 2nd render: true

[onikienko]

Hi @Othmanosx

Take a look at the documentation. At Initial value flow.
Hook returns boolean isInitialStateResolved which will be set to true once synchronized with chrome.storage.

const [{ isDark }, setValue, isPersistent, error, isInitialStateResolved] = useSettingsStore()

{isInitialStateResolved && <div>isDark: {isDark}</div>}

[Othmanosx]

it would be nice to have it as a global config so it always waits for it to be synced and then returns the initial value first, something like:

export const useSettingsStore = createChromeStorageStateHookLocal(SETTINGS_KEY, INITIAL_VALUE, { waitForInitialToBeResolved: true });

[onikienko]

Hi @Othmanosx
It sounds like a good idea! PR is welcome!