How to imitate hover and active effects onkeydown in react? - reactjs

Question

Edit:
I have an example on codepen showing the effects I want to implement. It is working, but I'm not sure if it is cleanly done to satisfy React 18's StrictMode.
https://codepen.io/yochess/pen/NWMOvrv?editors=0110
Question:
I have code where I have 2 div elements representing a left arrow and a right arrow.
When I hover over and click the arrow div element, I have css code that changes their styling using hover and active.
//file.css
.left-arrow-wrapper:active {
color: black;
}
.left-arrow-wrapper:hover{
background: rgb(254 226 226) !important;
}
.right-arrow-wrapper:active {
color: black;
}
.right-arrow-wrapper:hover{
background: rgb(254 226 226) !important;
}
I want to sort of emulate this effect with onkeydown.
For example, if the left arrow is clicked then setState is invoked on the left arrow's stylings. 0.1 seconds later using setTimeout, a 2nd setState is invoked on the left arrow and its styling would revert back to its original state.
As a result, useEffect is visited a few times. I want to make sure if a user is spamming the left arrow, then while its styling is changed, I want no effects to take place.
I am new to React and Hooks and the code above works on React 17, but when I change to React 18, the code is bugged. I'm assuming I am incorrectly implementing this effect. Is there a more proper way to accomplish this?
A side question is how do I properly clean up the setTimeouts on unmount? In the code below, I push all the setTimeouts into an array, and then set them to null once they are called. Then on unmount, I would return a function that clears the setTimeouts that are not null.
Here is the code:
import React, { useState, useEffect, useRef } from 'react'
import {
FaAngleLeft,
FaAngleRight,
} from "react-icons/fa"
const setStyles = {
defaultArrowStyle:{
backgroundColor: "lightgray",
borderStyle: "ridge"
},
clickedArrowStyle: {
backgroundColor: "rgb(254 226 226)",
borderStyle: "ridge"
},
}
const ArrowButtons = () => {
const [leftArrowStyle, setLeftArrowStyle] = useState(setStyles.defaultArrowStyle)
const [rightArrowStyle, setRightArrowStyle] = useState(setStyles.defaultArrowStyle)
const timeRef = useRef([])
const counterRef = useRef(0)
useEffect(() => {
window.addEventListener("keydown", handleKey)
return () => {
window.removeEventListener("keydown", handleKey);
}
}, [handleKey])
useEffect(() => {
if (rightArrowStyle.backgroundColor !== setStyles.clickedArrowStyle.backgroundColor) return
const counter = counterRef.current
const timer = setTimeout(() => cacheAndSetArrowStyle(setRightArrowStyle, counter), 100)
timeRef.current[counterRef.current++] = timer
}, [rightArrowStyle])
useEffect(() => {
if (leftArrowStyle.backgroundColor !== setStyles.clickedArrowStyle.backgroundColor) return
const counter = counterRef.current
const timer = setTimeout(() => cacheAndSetArrowStyle(setLeftArrowStyle, counter), 100)
timeRef.current[counterRef.current++] = timer
}, [leftArrowStyle])
useEffect(() => {
return () => {
// eslint-disable-next-line
timeRef.current.filter(timer => timer).forEach(timer => clearTimeout(timer))
}
}, [])
return (
<div className="row">
<div className="col-2 hand-icon text-center left-arrow-wrapper" style={leftArrowStyle} onClick={handleLeftClick}>
<FaAngleLeft className="left-arrow" />
</div>
<div className="col-2 hand-icon text-center right-arrow-wrapper" style={rightArrowStyle} onClick={handleRightClick}>
<FaAngleRight className="double-right-arrow" />
</div>
</div>
)
function handleKey(event) {
if (event.key === "ArrowRight") {
setRightArrowStyle(setStyles.clickedArrowStyle)
}
if (event.key === "ArrowLeft") {
setLeftArrowStyle(setStyles.clickedArrowStyle)
}
}
function cacheAndSetArrowStyle(setArrowStyle, counter) {
timeRef.current[counter] = null
setArrowStyle(setStyles.defaultArrowStyle)
}
}
export default React.memo(ArrowButtons)