Store timing with useEffect

[hohenp]

Hi @lostpebble

I am wondering what could be best practise as I have an issue with the timing of an update of the store...

I have a custom hook that loads and offers my config

const useConfigHook = () => {
     const configRepository = useConfigRepository();

     const config: IConfig = GlobalStore.useState((s) => s.config);

     const loadConfig = async () => {
          const configLoaded: IConfig = await configRepository.getConfig();
          GlobalStore.update((s) => {
               s.config = configLoaded;
          });
     };

     return {
          config,
          loadConfig,
     };
};

export default useConfigHook;

Then I have another hook I use as a repository to load data. That hook depends on the configHook. (I think its not really a hook...)

export const useBackendRepository = () => {
     const configHook = useConfigHook();

     const getVersion = () => {
          // here I use the configHook like...
          // post(configHook.config.url)....
     };

}

Then I have functional components, that use the backendRepository Hook like

const InfoPanel = () => {
     const configHook = useConfigHook();
     const backendRepository = useBackendRepository();

     const [phaVersion, setPhaVersion] = useState('');

     const getVersion = async () => {
          const version = await backendRepository.getVersion();
          setPhaVersion(version);
     };

     useEffect(() => {
          configHook.loadConfig()
    },[]);

     useEffect(() => {
          if (configHook.config) {
               // load version from backend
               getVersion();
          }
     }, [configHook.config]);

    return (
        <div>{phaVersion}</div>
    )
}

Now my problem is, that when the useEffect is triggered within the InfoPanel component and the backendRepository.getVersion() is called, that the config within the useBackendRepository is empty.
So its like the useEffect is called from outer to inner the config is not defined within the useBackendRepository.

Is there any best practice for that?

Thanks for your help!
Pascal

[lostpebble]

Hi @hohenp ,

I'm sorry, I've read over your code a few times and I'm very confused as to what could be going wrong- I cannot really understand what it exactly is meant to do... There's probably a much easier way to achieve what you're trying to do here. It looks like you're wrapping many async functions and requests all together in multiple layers and its not easy to reason about.

Its very hard for me to debug exactly what could be going wrong here. It may have something to do with the fact that you're calling functions in higher hooks which do things outside of the React "component" pattern- so you're getting state that hasn't been updated yet from the GlobalStore.useState() hook- or an object that references an older state.

I'd suggest re-looking at the layout of your code here and trying to de-complexify it. Maybe take a look at the Async Actions to make requests which are reliant on actual local component state, and react accordingly.

[lostpebble]

Hi @hohenp ,

I looked it over- and its as I assumed earlier:

It may have something to do with the fact that you're calling functions in higher hooks which do things outside of the React "component" pattern- so you're getting state that hasn't been updated yet from the GlobalStore.useState() hook- or an object that references an older state.

The function inside your useDataHook is referencing an old version of config when it is called.

This is not really a pullstate problem, its a problem with understanding how JavaScript referencing works and more specifically how to use custom functions in React Functional components, and React hooks ordering. You need to be aware of which variables are in scope at which time, and what current thing they are referencing. Especially with functions, it can be hard to debug when you are referring to variables outside of the function scope, like what is happening here.

In JavaScript functions are variables too, and when they are created they reference all the variables inside their scope at that time. When loadData() is called, its calling that version of the function which still references the null version of config.

[hohenp]

Hi @lostpebble

thanks for looking over it! I used redux before with the same architecture and switched to pullstate and then had this issues. But I do not think that it is an pullstate issue, also! I think the timing might have changed a bit and now causes these issues.

I am aware about the function and scope topic, but I thought that the useDataHook gets refreshed when the state changes within the hook. So when I do the GlobalStore.update within the useConfigHook it should cause the useDataHook to refresh.

It would make more sense to me when I would use Memo or useCallback or other perfomance hints.

So as it is an problem of the architecture, do you have an best practice how to do that stuff?

Thanks
Pascal

[lostpebble]

I would say rather pass config to the loadData() function instead of trying to take it from inside the component.

Because there are multiple calls to useState() and you are running effects on the value of config its not guaranteed about which order variables will be set, unless you are very careful. For example, if you swap the useDataHook() to be higher than the useConfigHook() in your <Hello/> component, you should see that it works- because now useDataHook() is for sure getting the value of config earlier than when useConfigHook() returns that value and runs the useEffect() hook inside of your <Hello/> component.

Anyway, I know its complicated. But this kind of thing is rather outside the scope of Pullstate- it comes down to your app design and thinking of better ways to do things.

As much as possible, don't define hanging functions inside your components which rely on state inside the scope of your component- by the time they are called, that state might be stale. The functions which are causing issues here can all rather be put outside of your component and you can pass in an exact value for config inside the useEffect() hook instead- that way you know for sure the value is what you want it to be.

[hohenp]

Thanks @lostpebble , I did't see that just reordering helps in that case but I see the danger in that situation.
I totally agree that passing config to the loadData() function would easy solve the problem. The thing is, I have dozens of those functions and would then always have to pass the config down to these functions. I tried to have a hook, that is independent and can be easily called from different components without the need that these components prepare the config in advance.

But its absoluty not an pullstate thing and more an solution architecture thing.
Thanks for your time and your help! I really appreciate that!!

Thanks
Pascal

[hohenp]

Short postnote... @lostpebble
I found that use-between repo. Pretty young but it works in my example even with "wrong" order of hooks.
https://stackblitz.com/edit/react-ts-pullstate?file=Hello.tsx

Maybe an option for the context related data in the applications, like my config issue...
Just wanted to let you know...

Thanks
Pascal