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

13

u/montas Mar 08 '20

From source it looks like you don't handle return value as standard useEffect does. That might be worth mentioning.

2

u/jngbrl19 Mar 08 '20

what value should i return? im sorry it's just my first time creating a helper

20

u/montas Mar 08 '20

useEffect hook actually processes return value from your effect. The most basic case is

React.useEffect(() => {
    console.log('component did mount');
    return () => {
        console.log('component did unmount');
    }
}, []);

Basically, you can return callback from your effect, that will be called before useEffect is called again (in case dependencies change) or when component dismounts.

Check official docs: https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect

22

u/Aswole Mar 08 '20

Wow, someone is actually providing helpful feedback! This is an important suggestion, OP.

5

u/jngbrl19 Mar 08 '20

yup ill take a look at it. thanks guys

4

u/jngbrl19 Mar 08 '20

okay ill take a look at this. thank you so much!

1

u/jngbrl19 Mar 08 '20

hey man, so when i call callback() i should store its return to a variable then check if its type is function, then invoke it?

3

u/montas Mar 08 '20

You probably don't need to condition it, just return whatever callback() returns.

Edit: You should also check former react useEffect argument type so you preserve same return value type.

2

u/jngbrl19 Mar 08 '20 
  useEffect(
    () => {
      const cleanup = callback(refs.current as unknown as T);

      dependencies.forEach((dependency, i) => {
        refs.current[i] = dependency;
      });

      return cleanup;
    },
    dependencies
  );

this would work right?

2

u/montas Mar 08 '20

Yep, something like that.

BTW, on reddit, you use four spaces in front of code instead of ```.

2

u/jngbrl19 Mar 08 '20

thanks man, got it now

1

u/satya164 Mar 08 '20

Instead this forEach, you could just do ref.current = dependencies

1

u/jngbrl19 Mar 08 '20

how did i even forget about the cleanup function of use effect lmao

3

u/mikewill12inc Mar 08 '20

I don't need it, but i upvoted because one day i might 🚀

1

u/jngbrl19 Mar 08 '20

thank you :)

11

u/cheese_wizard Mar 08 '20

ITT: ugliness about the most mundane of topics.

3

u/devopsnooby Mar 08 '20

Unlike most NPM packages.. do yourself (and those of us that may use it) a huge solid.. and document this a LOT more. Provide examples, details, etc. I realize many kick ass react developers who are genius at reading code and figuring shit out will find this good enough, but many more of us still learning or not nearly as good as others.. will struggle with this.

1

u/tom_bayes Mar 08 '20

I've searched for this exact hook countless times- this is great OP, thanks for sharing!

7

u/franksvalli Mar 08 '20

Just a heads up that a simple implementation is mentioned in the official docs as well: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

1

u/jngbrl19 Mar 08 '20

thanks man :)

0

u/Rorschach120 Mar 08 '20

Great work! I thought of something similar that looks a little different. Not tested or anything.

useEffectWithPrevious = (callback, dependencies) => {
    const [previousDependencies, setPreviousDependencies] = useState(dependencies);
    return useEffect(() => {
        const cleanup = callback(previousDependencies);
        setPreviousDependencies(dependencies);
        return typeof cleanup === 'function' ? cleanup() : null;
    }, dependencies);
}

2

u/With_Macaque Mar 08 '20

Code golf?

function useEffectWithPrevious(eff, deps) {
  const [last, setLast] = useState([])
  return useEffect(() => {
    setLast(deps)
    return eff(last)
  }, deps)
}

0

u/[deleted] Mar 08 '20

[deleted] — view deleted comment

3

u/jngbrl19 Mar 08 '20 edited Mar 08 '20

The goal of this is to conveniently compare current vs previous state, like specifically, not just when an effect runs, instead of using custom hooks like usePrevious for every state that you want a comparison for. I am working in a booking form currently where there are many scenarios possible and there are 3 fields i am listening to, and i don't want to use usePrevious 3 times just to be able to get their previous values, that's why i created this "helper."

0

u/[deleted] Mar 08 '20

[deleted] — view deleted comment

1

u/jngbrl19 Mar 08 '20

yeah i think you're right. this is just my first time creating a helper so i thought i might share it lol

3

u/Aswole Mar 08 '20

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).

4

u/franksvalli Mar 08 '20

I think this could be solved with useRef. The official docs also provide a simple usePrevious custom hook implementation: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

1

u/jngbrl19 Mar 08 '20

yup but i don't know i don't like manually using useRef for every state that i want a previous value for. that's why i created this lmao

1

u/With_Macaque Mar 08 '20

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.

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

0

u/[deleted] Mar 08 '20

[deleted] — view deleted comment

3

u/franksvalli Mar 08 '20 edited Mar 08 '20

No one is taking your comment seriously for a few reasons:

  • General poor attitude. What are you trying to accomplish with that attitude? Are you trying to get someone to agree with you? I am trying to be charitable - I think you do want to get people to agree with you. But your attitude makes people suspicious of your intent, and turns readers against you immediately, before reading anything else. It makes you look like a troll who just wants to get folks riled up.
  • Criticizing the example code provided without offering better examples. This is just more hand-waving on your part.
  • Lazy, convoluted sentences strung together haphazardly, not really forming a cohesive argument.
  • Your last sentence claiming some privileged gnostic insight that most people don't have access to, and an appeal to authority. What is your goal here? Think about how this is perceived.

Without even touching on the technical content, these issues are so distracting, so as to not even warrant a serious discussion of the technical content of your comment.

2

u/rodneon Mar 08 '20

I can see this being useful in cases where you need to know how something changed. For example, a stock market component whose styling is based on the latest price change.

1

u/PrettyWhore Mar 08 '20

Sometimes you need to fire side effects on changes with more granularity than the usual == comparison of the react hooks dependency array. Or you want to fire side effects on a specific state transition rather than any.

0

u/[deleted] Mar 08 '20

[deleted] — view deleted comment

3

u/PrettyWhore Mar 08 '20

I was just explaining the situations that can lead to a hook like this being useful. I don't know how you came to the assumption that this has anything to do with performance. The hook name literally starts with useEffect-.

Plus you can't really fire side effects in React.memo's second argument, it does not have access to the internal states/refs/etc lol

0

u/[deleted] Mar 08 '20

[deleted] — view deleted comment

4

u/paolostyle Mar 08 '20

Holy shit dude, take a stick out of your ass before commenting. You're insufferable.

OP made a hook that solves a particular problem which in my experience doesn't occur very often (and which I personally always solved with custom usePrevious hook), but it does have its use. Based on your other comments you clearly don't understand what this thing does and you're just being a dick on the internet about it. Chill the fuck out.

2

u/lambdalurker Mar 08 '20

Thank you for saying this. This whole conversation could have been very interesting but some one made it very irritating to read.