React calling function using useEffect multiple time

Question

I tried to calling a function more then 2 times using useEffect hook but the result it only calling that function with last call.

here is my code and try :

 const [ selectValues, setSelectValues ] = useState([]);
 const selectHandler = (e) => {
 const filteredValues = selectValues.filter((i) => i.id !== e.id);
     setSelectValues([ ...filteredValues, e ]);
  }; 

useEffect(() => {
  const obj1 = {...}
  const obj2 = {...}
  selectHandler(obj1)
  selectHandler(obj2) // this is the only object will be saved to the state
},[])

I hope that issue explained properly

Pavlo Zhukov · Accepted Answer · 2021-03-23 01:11:10Z

3

To be able to save any intermediate values from the state, you should update it in a callback manner, because selectValues contains the value which was there when component was rendered (initial value in our case).

const selectHandler = (e) => {
  setSelectValues((prevValues) => [...prevValues.filter((i) => i.id !== e.id), e]);
};

answered Mar 23, 2021 at 1:11

Pavlo Zhukov

3,3573 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React calling function using useEffect multiple time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related