Constant updates make useEffect and useCallback impossible to implement about axios-hooks

[simoneb]

Fixed in version 1.5.0.

[simoneb]

Can you post a realistic source code example?

[davidwilson3]

Here's a little more detail. If you need an even deeper example, I can try to provide that later tonight.

const user = useSelector((state) => state.auth.username);
const [, onReadMetadata] = useAxios({ url: "/api/customer/readMetadata", method: "GET" }, { manual: true });

useEffect(() => {
    console.log("--------------this ran---------------");       
    onReadMetadata({
        params: { user: user },
        transformResponse: [
            (response) => {                    
                setMetadata(JSON.parse(response));
            },
        ],
    });
 }, [user, timestamp, onReadMetadata]);

Our application needs to update the a table holding the metadata every time either the user or a certain timestamp variable changes. The timestamp is changed by another component and it is the way we notify this component that the metadata needs to be get an update from the back-end via the axios-hooks API call.

The React hooks dependencies say that we should also include onReadMetadata() as a dependency. However, including this as a dependency causes hundreds of re-renders per second. So, for some reason it sees this function as constantly changing. I've verified that the other dependencies are not the cause and its definitely caused by the execution function from the hook.

The typical solution offered by the React documents for this would be to wrap onReadMetadata() in its own function that includes useCallback(). Something like this:

const updateMetadata = useCallback(() => {
        console.log("--------------this ran---------------");       
        onReadMetadata({
            params: { user: user },
            transformResponse: [
                (response) => {                    
                    setMetadata(JSON.parse(response));
                },
            ],
        });
    }, [ onReadMetadata]);

However, memoizing this does not fix the issue and it still results in this being re-rendered tons of times per second. Thus, it would seem that the onReadMetadata() execution function coming from the hook is constantly changing. Basically, it makes including this execution function in useEffect() or useCallback() difficult to utilize while following the general guidelines of hooks. I would think that it shouldn't be changing constantly and really should be maintaining the same state though. I will look through the source code today and see if I can find a possible cause. Perhaps something in the source needs to be memoized and only returned via the hook on change?

Thanks, let me know if you need more details. Hopefully this was sufficient information.

[simoneb]

Thanks for the details, I can see the issue now. Yes, the function returned by the hook is indeed a new function every time the hook is executed, hence why you're experiencing this behavior.

I can try to find a way to prevent this from happening. In the meanwhile, have you tried ignoring the eslint rule and omit the onReadMetadata function from the list of dependencies in your useEffect hook?

[davidwilson3]

Thank you, I appreciate you taking a look at this.

Yes, I have tried excluding it from the dependencies and it does work as desired. So thankfully there is a working solution and this won't by any means be breaking the application. Long term, it would be nice to follow the general guidelines as I think there probable is some type of performant, memoized solution for this (though I don't have that answer at this time).

Let me know if you have any other questions. If I get time over the next week or so, I'll take a look to see if I can offer a potential solution for this.

[simoneb]

Yes let's use that as a mitigation and meanwhile let me check what it would take to make that function keep its reference rather than being created every time.

[simoneb]

@davidwilson3 I published a prerelease version where I tried to address this issue. It's available as version 1.5.0.0-0, can you try it out and let me know if it fixes the issue?

[davidwilson3]

@simoneb Sure thing, I'll check as soon as I get a chance. Thanks for looking at this so quickly.

[davidwilson3]

This appears to have fixed the issue. I tested it a few different ways and it now works great with useEffect and useCallback.

Thank you. Feel free to close this issue.

[simoneb]

Thanks for confirming. I will release a non-prerelease version with this fix soon.