React useEffect trigger conditionally

Question

I'm moving over to functional components from class components and having trouble handling this scenario. This component's state can be updated by 2 different event listeners: key down or mouseover. I want to trigger a callback after the state is updated ONLY if updated by key down. Any way to do this?

const handleMouseOver = e => {
  setSelection(e.target.value)
}

const handleDownArrowKeyDown = () => {
   ...
   setSelection(selection + 1)
}

useEffect(() => {
   // Only execute below if selection state was updated by handleDownArrowKeyDown
   ...
}, [selection])

CertainPerformance · Accepted Answer · 2022-03-21 23:59:52Z

1

Put that code inside handleDownArrowKeyDown instead - accounting for the new selection number.

const handleMouseOver = e => {
    setSelection(e.target.value)
}

const handleDownArrowKeyDown = () => {
    setSelection(newSelection)
    const newSelection = selection + 1;
    // stuff that relies on newSelection
}

answered Mar 21, 2022 at 23:59

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

2 Comments

ronbon Over a year ago

No guarantee that will execute after the state has been set.

CertainPerformance Over a year ago

Indeed, it definitely won't execute after the state has been set - rather, it'll definitely execute before the state has been set, which is why you need // stuff that relies on newSelection rather than an effect hook.

Collectives™ on Stack Overflow

React useEffect trigger conditionally

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related