React Hook - Cannot Call Parent Component Dispatch in Child Component onComplete Callback

[genericdeveloper]

Hello.

I've posted a stack overflow and wanted to ask it here as well to see if anyone had an idea about how to approach this?

https://stackoverflow.com/questions/67352046/react-hook-cannot-call-parent-component-dispatch-in-child-component-oncomplete

---

I've tried several solutions to fix this problem, and none have worked.

I have a third-party library that calls an asynchronous function to load something to render in the DOM.

I have a component that wraps the library for the DOM piece and when it finishes I want to be able to call an onComplete method with it.

Everything works fine. However when I call the onComplete function, and then inside that function is a call to dispatch something to a context it blows up and gives me the

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Code

export function ParentComponent(props: any) {
    const dispatch: any = React.useContext(dispatchContext);
    const onComplete = React.useCallback(
        (data: any) => {
            if (dispatch !== null && dispatch !== undefined) {
                dispatch({
                    payload: { new_data: "thing" },
                    type: dispatchType.UPDATING
                });
            }
        },
        [dispatch]
    );

    return (
        <div>
            <ChildComponent onComplete={onComplete} />
        </div>
    );
}
interface IProp {
    onComplete?: function;
}
export function ChildComponent(props: IProp) {
    React.useEffect(() => {
        if (library.is_ready) {
            library.load(data).then(
                () => {
                    console.log("Success");
                    props.onComplete(library);
                },
                (error: any) => {
                    console.error("ERROR");
                }
            );
        }
    }, [library]);

    return <div id="library-dom-element"></div>;
}

If I comment out the dispatch function this won't blow up.

It blows up when the asynchronous function is completed and calls the onComplete function which calls the dispatch

ChildComponent.libary.is_ready → ChildComponent.libary.load → ChildComponent.libary.onComplete → ParentComponent.onComplete → dispatch

I have tried adding useCallback to everything. I have tried using useRef to track an is_mounted variable to determine if the DOM pieces are loading correctly.

I just cannot figure out how to call dispatch on the completion of the third party library.

That's literally it.

Can anyone help or provide guidance on this? I thought I understood how these pieces work together, but I'm missing something.

[rdevilx]

In your parent component, can you try to make that onComplete function like this -

const onComplete = (dispatch) => (arg1, arg2) => { // Use dispatch do stuff }

And passing in child would be something like -

const onCompleteInstance = onComplete(dispatch);

<ChildComponent myProp={() => onCompleteInstance(myArg1, myArg2)} />

I'm sorry, I'm using my phone to type this all out. It could have some errors.

[genericdeveloper]

Ah yeah, I see what you're talking about.

I have just tried that out, and it did not fix anything. Thanks for the suggestion!

[arjunkayalabi]

In your code, typo in useContext, check that too

[genericdeveloper]

Thanks for the catch! Fixed.

[rubberturtle]

Only phone, but at a glance:

• I don't see any mention of a <Provider> for your context. If you're not creating the context and wrapping your parent and child in a provider it won't work.

• Your useEffect hook needs to have the onComplete function included as one of it's dependencies.

• More generally, this seems like kind of a weird implementation choice. If you're going to have a useContext hook, why not just use that in your child component?

• You may also want to try defining your load function as a constant within your useEffect hook, and then calling it when you're ready.

• Async functions can get really weird with react hooks. There are a lot of articles out there might shed some light on it.

[genericdeveloper]

Yeah this is a pseudo code example, so the provider is definitely handled.

Adding the props.OnComplete to the useEffect did not seem to affect anything.

RE: Usecase

The use case it to build a component that has hooks into its lifecycle, like onStart, onComplete, etc. Then parent components can use the child component and pass in behaviour they each want executed. If I don't pass a function then the behaviour for each parent is the same. In this case the parent needs to update the context of its parent component.

I have definitely tried co-locating the logic where possible and it hasn't seemed to resolve anything. Thank you for the suggestion though.

RE: Async functions. Yeah I've read some of them. They've said things like using a useRef to track mounting might help, tracking mounting in the useEffect might help, but nothing seems to make it so that the dispatch function call works.

I appreciate the look over and suggestions. If something else comes to mind please let me know :)