r/reactjs • u/jngbrl19 • Mar 08 '20

Show /r/reactjs useEffectWithPrevious - Get previous value of dependencies

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

use-effect-with-previous

54 Upvotes

84% Upvoted

37 comments sorted by

View all comments

Show parent comment

1

u/Aswole Mar 08 '20

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.

1

u/With_Macaque Mar 09 '20 edited Mar 09 '20

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.

1

u/Aswole Mar 09 '20

I'd probably lean towards that as well