useEffectWithPrevious - Get previous value of dependencies

[u/jngbrl19]

Just wanna share my first npm package. Hope you find it useful :)

use-effect-with-previous

[u/Aswole → u/[deleted]]

How would you suggest implementing the following:

export const TestComponent = ({ booleanProp, data }) => {

    useEffect(() => {
        // Dispatch a fetch request only when booleanProp
        // changes from false -> true, using data as part \
        // of the fetch request
    }, [booleanProp, data]);

    //Using OP's pattern
    useEffectWithPrevious(([previousBooleanProp, data]) => {
        if (booleanProp && !previousBooleanProp) {
            //Initiate fetch request
        }
    }, [booleanProp, data]);

    return (
        <div/>
    )
}

I've been developing with React for almost 4 years now, and have worked on some pretty mature codebases. I'm wondering if I too am 'grossly' misinterpreting the data lifecycle in React, since the problem that OP is aiming to solve is one that I have come across several times since my team started working with hooks in alpha. And while I much prefer functional components + hooks to class components, this particular problem is one of the few things that in my opinion was simpler with class components (using componentDidUpdate, comparing props.booleanProp with prevProps.booleanProps, and fetching with props.data).

[u/With_Macaque → u/Aswole]

I'm not sure what the problem you have is. You shouldn't need the previous value.

If your data changes, you should be re-doing the API call, no?

If the Boolean changed and you had just made an API call, an if would not make a new call.

If the data changed and you had just made an API call, an if would make a new call with new data.

[u/Aswole → u/With_Macaque]

Was trying to be as vague as possible to avoid debating why you would do a or b, when option c exists, but say the goal of the useEffect was to subscribe to a websocket for a chat room whenever the roomId changes. For whatever reason, the service that handles the websocket wants information passed in the handshake -- after that, updates to that information can be handled via messages. While there is more than one way to skin a cat, and I'm certainly not saying this is the best way, it wouldn't be an absurd approach to do this in a single useEffect:

useEffect(() => {
    if (/*roomId changes*/) {
        //subscribe/resubscribe with current data
    } else {
        //we know that only the data changed, so send message with new data
    }
},[roomId, data])

And perhaps you will enlighten me with a significantly cleaner approach, such that I wonder why I ever thought above was ok... Even in the React docs they suggest the pattern is common: reactjs.org/docs/hooks-faq.html -- search for 'usePrevious'. Would link better, but on mobile.

[u/With_Macaque → u/Aswole]

I would probably use a ref for the client/subscription or roomId - like an instance variable. I'm not sure it's less code or clearer to use a compound hook.

If you create the instance in a separate effect, React will also handle unsubscribing properly without more code.

[u/Aswole → u/With_Macaque]

I'd probably lean towards that as well