`createChromeStorageStateHookLocal` knowing when value has been fetched (or none found in storage) about use-chrome-storage HOT 15 CLOSED

It sounds like you need to useEffect to react on your data changes. Something like that:

// init 
const useCounterStore = createChromeStorageStateHookLocal('myCounter',  0);

// somewhere in the component
const [counter, setCounter] = useCounterStore();

React.useEffect(() => {
    // will fire only when couner changed
}, [counter]);

Be careful if your data is not primitive (array or object). In this case, you will need to avoid running this effect on each component update.

from use-chrome-storage.

It sounds like you need to useEffect to react on your data changes. Something like that:

// init 
const useCounterStore = createChromeStorageStateHookLocal('myCounter',  0);

// somewhere in the component
const [counter, setCounter] = useCounterStore();

React.useEffect(() => {
    // will fire only when couner changed
}, [counter]);

Be careful if your data is not primitive (array or object). In this case, you will need to avoid running this effect on each component update.

Hmmm I'm already using a useEffect and its getting run when counter is still the default value

from use-chrome-storage.

It's how things work in React. useEffect always fires on the initial render. Intentionally.

docs

It's out of use-chrome-strage lib topic. But I guess you need to adapt your extension/app logic to be more "react-way".

from use-chrome-storage.

Regarding your hasLoaded proposal. The fact of state change means that data has loaded.
So you just need to useEffect which depends on the state and design your components accordingly. Keeping in mind React hooks behavior and logic (initial render, shallow compare of non-primitive dependencies, etc).

from use-chrome-storage.

I don't think having a concept of hasLoaded is non-reactive. This is a pretty common technique in react to trigger rendering when loading remote data. You have an isLoading state value which you default to true and after an async load process (via useEffect), you can set that to false.

The problem is that the state doesn't change if there is no value already set. The default value is loaded as the default value, so I have no way of telling if the value coming from the chrome storage local hook is before it has been loaded or after it has been loaded.

from use-chrome-storage.

The other way I can picture achieving this is something like a whileLoadingValue that you can specify in addition to initialValue. In this case, I might set whileLoadingValue to be null to know that it is still loading. In fetching from the chrome storage, it would either find a value there, or set it to initialValue after it has been loaded.

For example, with a generic async process, this is how I would do that:

const [data, setData] = useState<any[] | null>(null);

async function loadData() {
    const resp = await fetch("https://data-url");
    const data = await resp.json();
    setData(data || []);
}

useEffect(() => {
  void loadData();
}, [])

return data === null ? <div>Loading...</div> : <div>{data.map(renderDataItem)}</div>

from use-chrome-storage.

Say we have the next hook:
const [value, setValue, isPersistent, error] = useChromeStorageLocal('counterLocal', 0);
In the chrome.storage.local we already have: counterLocal: 10

Changes of value:

0. undefined on initial component render
1. value is 0 (set via initialValue of the hook)
2. useChromeStorageLocal call to chrome API to get the value of counterLocal. value changes to 10

Do you need to know when initialValue was replaced with the value stored in the storage (stage 2 in that example)? Something like isInitialStateResolved?

from use-chrome-storage.

Do you need to know when initialValue was replaced with the value stored in the storage (stage 2 in that example)? Something like isInitialStateResolved?

Right exactly! The exact situation is because I'm seeding the value from a remote source. So I have some logic later in the file that is something like (in a useEffect):

// the defaultValue is `null` for ex.
// The problem is that this triggers while the data is loading AND on the initial load when there is nothing in local storage
if (!value) {
  fetchAndSetValue()
}

I basically only want that piece of code to run if and only if we have already loaded from local storage, and found that there is nothing there.

With something like isInitialStateResolved, I could write:

// the defaultValue is `null` for ex.
if (isInitialStateResolved && !value) {
  fetchAndSetValue()
}

from use-chrome-storage.

Got your point.
It make sense.
Will implement

from use-chrome-storage.

great thank you :)

from use-chrome-storage.

hi! i saw you made the commit on this, just wanted to check in on when you think it'd be ready to merge? I have a project I'm planning on launching this week that relies on this functionality. Want to check if I need to fork to get in time for my deadline!

from use-chrome-storage.

I plan to release today.

from use-chrome-storage.

https://github.com/onikienko/use-chrome-storage/releases/tag/v1.1.0

from use-chrome-storage.

thanks! I'm testing this now, and it doesn't ever seem to be setting to complete? any ideas what's going on?

this is the code

export const useReviewItemsStore = createChromeStorageStateHookLocal<
  ReviewItem[]
>(StorageReviewItemsKey, []);
  const [
    reviewItems,
    setReviewItems,
    _persistent,
    _err,
    isInitialStateResolved,
  ] = useReviewItemsStore();
  console.log("initial state resolved?", isInitialStateResolved);

from use-chrome-storage.

Right! I forgot about createHook.... Will review your PR

from use-chrome-storage.