CODEWITHSUNDEEP
reactjsreact-hooks
ronbon
ronbon

Reputation: 3

React useEffect trigger conditionally

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

Upvotes: 0

Views: 130

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370679

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
}

Upvotes: 1

Related Questions