Do i need to create different useEffect for every prop change?

Question

I have three props in store and when any one of them changes useEffect runs. So my question is that, Do i need to create different useEffect separately for every props changing?So that only the code related to particular props will work.

I tried only one useEffect with all the props changing.

>   useEffect(() => {
>     if (loadingResponse) {
>       setLoader(true);
>     }
> 
>     checkVerifyLink(verifyPwdLinkResponse);
> 
>     if (!isEmpty(resetPasswordResponse)) {
>       if (resetPasswordResponse.errors) {
>         // do something
>       }
>     }   }, [resetPasswordResponse, verifyPwdLinkResponse, loadingResponse]);

Whenever my "loadingResponse" props changes, the other two function also runs which is expected but I also don't want to create 4-5 different useEffect if say i have 4-5 props in my Component.

Possible duplicate of [Should I use one or many useEffect in component?](https://stackoverflow.com/questions/54002792/should-i-use-one-or-many-useeffect-in-component/54004148#54004148) — Shubham Khatri, Jun 21 '19 at 04:47

zilijonas · Answer 1 · 2019-06-21T06:17:13.580

If the content of the useEffect depends on only one prop but you use more props in the hook's condition, your performance will not be as good as it could be.

Combining props in useEffect is meant for cases when the content of effect depends on all of those props.

In this way, you will improve your app's performance. This is the reason why useEffect is better than the usual React lifecycles performance wise.

If your checkVerifyLink(verifyPwdLinkResponse) function needs to be called whenever at least one of your props (resetPasswordResponse, verifyPwdLinkResponse, loadingResponse) change, this is the right way to use it since it will reduce your code repeatability which will lead to cleaner code.

Otherwise, if two other functions need to be called only when loadingResponse props changes, this would be a better approach for your case:

useEffect(() => {
  if (loadingResponse) {
   setLoader(true);
  }
}, [loadingResponse]);

useEffect(() => {
  checkVerifyLink(verifyPwdLinkResponse);
}, [verifyPwdLinkResponse, loadingResponse]);

useEffect(() => {
  if (!isEmpty(resetPasswordResponse)) {
    if (resetPasswordResponse.errors) {
      // do something
    }
  }
}, [resetPasswordResponse, loadingResponse]);

So it means if i have 4 different props and have different functionality for all, I should create 4 different useEffect? And each useEffect also runs for the first time so it decreases my app's performance or not? — wiz khalifa, Jun 21 '19 at 06:34
@wizkhalifa That is correct. If `function a()` needs to be called only when prop `b` changes, always create for it a separate useEffect. — zilijonas, Jun 21 '19 at 06:39

score 0 · Answer 2 · answered Jun 28 '19 at 09:04

0

According to the Dan Abramov in the React Conf. 2018 “with hooks we separate code not based on the lifecycle method name but based on what the code is doing”

So we should not compare useEffect with the lifecycles methods and use it according to our need in the application.

answered Jun 28 '19 at 09:04

wiz khalifa

65
7

A comprehensive answer has already been given to you with an explanation and a correction of your code. Instead of selecting it you have decided to quote someone with no explanation of logic which constitutes to a poorly written answer. – Avin Kavish Jun 28 '19 at 09:42

Do i need to create different useEffect for every prop change?

2 Answers2