How can we use useEffect for multiple props value changes

Question

How can we identify props changes in functional component?. Sample code here. Can you please help me to convert this componentDidUpdate method to functional componet using useEffect or any other way.

componentDidUpdate(prevProps){
   if(prevProps.props1 !== this.props.props1){
     //1st Function call
   }
   if(prevProps.props2 !== this.props.props2){
     //2nd Function call
   }
}
//-----------------

useEffect(()=>{

},[props1, props2])

Does this answer your question? [How to compare oldValues and newValues on React Hooks useEffect?](https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect) — Lakshya Thakur, May 07 '21 at 14:16

score 2 · Accepted Answer · edited May 03 '22 at 17:15

2

Simplest solution is to use multiple useEffect invocations, one for each prop:

useEffect(()=>{
    // Something when props1 changes
},[props1])

useEffect(()=>{
    // Something when props2 changes
},[props2])

If you really need a combined useEffect (eg. if there is some shared logic), you can use useEffect in conjunction with usePrevious.

const prevProps1 = usePrevious(props1);
const prevProps2 = usePrevious(props2);

useEffect(() => {
    // compare props1 with prevProps1 and props2 with prevProps2
}, [props1, props2]);

Note that usePrevious is a custom hook from react-use that needs to be installed prior use (more info here: https://github.com/streamich/react-use. TL;Dr: use npm i react-use to install the package to use this (and other) hooks).

edited May 03 '22 at 17:15

Mahsan Nourani

294
2
17

answered May 07 '21 at 14:17

lorefnon

12,875
6
61
93

although this approach is very fascinating, i wonder if the render can join multiple update request. Ex. if prevProps1 changed, and props1 changed as well, so will that trigger render twice in two different update? This question might not relate to `usePrevious`, i apologize. – windmaomao May 07 '21 at 14:26
ok, i guess the answer is no, maybe it's answered here already, https://windmaomao.medium.com/hook-myth-from-react-9495aa8ad7af, `setProp1` is called and then both `effects` will be updated **after** the rendering. – windmaomao May 07 '21 at 14:29
usePrevious will not trigger a re-render. And effect is triggered only when props1 changes and not prevProps1 changes. So you don't need to worry about double re-renders. – lorefnon May 07 '21 at 15:16

score 0 · Answer 2 · answered May 07 '21 at 14:15

If you want to call different functions when different props change than you can multiple useEffect for each prop change.

Try something like below:-

useEffect(()=>{
   // function call when props1 change
},[props1])

useEffect(()=>{
   // function call when props2 change
},[props2])

score 0 · Answer 3 · answered May 07 '21 at 14:16

0

You can do 2 separate useEffect for that. You don't have to put it on a single useEffect since it's hard to identify which state did an update.

useEffect(() => {
  
}, [props1]);

useEffect(() => {
  
}, [props2]);

answered May 07 '21 at 14:16

Techuila

1,237
8
12

Bhojendra Rauniyar · Answer 4 · 2021-05-07T15:01:52.803

0

A modified approach to lorefnon's answer:

let {current: {p1, p2} = {}} = useRef()
useRef(() => {
  p1 = props1 // check with if (p1!=props1)
  p2 = props2 // check with if (p2!=props2)
}, [p1,p2]) // run effect when p1 or p2 change 
// basically states when props1 or props2 changes.

edited May 07 '21 at 15:01

answered May 07 '21 at 14:50

Bhojendra Rauniyar

83,432
35
168
231

How can we use useEffect for multiple props value changes

4 Answers4