Design pattern for using unstated containers with react hooks and useEffect

[artivilla]

Any examples on this? I'm passing in unstated objects and accessing their getters/setters and running into tons of react-hooks/exhaustive-deps warnings in my useEffect methods.

I'd have posted this in unstated but that repo does not have an issues list.

[loganvolkers]

@artivilla I just published a module that may help you migrate from unstated to unstated-next by adding hooks support to your existing Container classes.

Does this help? https://github.com/loganvolkers/unstated-retro/

[artivilla]

@loganvolkers thanks for this! we're actually pretty close to migrating almost all our containers but def useful for others who might be in a similar situation.

[loganvolkers]

You're welcome! Great to hear it's used.

Yeah we're in the same boat. Hopefully unstated-retro become obsolete, but so far we haven't found a way to migrate 100% of our old state containers yet without it.

On Fri, Nov 22, 2019, 11:37 AM Arti Villa, [email protected] wrote:

@loganvolkers https://github.com/loganvolkers thanks for this! we're actually pretty close to migrating almost all our containers but def useful for others who might be in a similar situation.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jamiebuilds/unstated-next/issues/47?email_source=notifications&email_token=AAI2PXVEMM3Q4O2YU4OFKILQVAYIZA5CNFSM4IETVPYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE6U4DA#issuecomment-557665804, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAI2PXVODHWJWBDGYYLJOELQVAYIZANCNFSM4IETVPYA .

[antonsamper]

I've encountered this recently and i haven't found an elegant way to do this. The following thread is probably one of the better sources of information about this:

https://github.com/facebook/create-react-app/issues/6880

My key take away from it is that because the container is not defined inside the component render, then it doesn't have to be included as a dependency.

Unfortunately if you are using the react-hooks eslint plugin, then you will also need to disabled the eslint warning by using // eslint-disable-next-line react-hooks/exhaustive-deps

const SignOut = (): ReactElement => {
    const auth = useAuth();

    useEffect(
        () => {
            auth.logout();
        },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [],
    );

    return (...);
};

[alik472]

One full working day lost to this issue. I thought I didn't get how useEffect works, and finally I realized maybe unstate-next causes this lint error.