Hover Effect in React is too slow (state update for hover effects)

I am trying to change the background color of a list item in case the user is hovering on top of it.
But when the list size grows the hover effect becomes too slow and gives a feel as though the site is lagging.

I am using the Tree View component of material UI and jss for styling

important pieces of code

use states

   const [hoverElementId, setHoverElementId] = useState("");

important functions

 const handleTreeItemMouseHover = (event, label, nodeId) => {
        let hoverKey = generateKey(nodeId, label);

    const handleRegionSelectUnselect = (value, selectedKey, selected) => {
        let selectedRegions = { ...selectedRegionsLocalState };

        if (selected === true) {
            selectedRegions[selectedKey] = value;
        else {
            delete selectedRegions[selectedKey];


const generateKey = (nodeId, name) => {
        return String(nodeId) + "-" + String(name);
const getTreeItemLabel = (labelText, labelData) => {
        let selectedKey = generateKey(labelData.nodeId, labelText);
        let isItemSelected = selectedRegionsLocalState[selectedKey];
        let isItemHovered = selectedKey === hoverElementId
        return (
                onMouseOver={(event) => {
                    isItemHovered ? { backgroundColor: "grey" }
                        isItemSelected ? { backgroundColor: "red" }
                            : {}
                container justify="space-between" >
                <Grid item className={classes.treeItemLabelText}>{labelText}</Grid>
                <Grid item
                    onClick={(event) => {
                            //toggle value in case selected -> deselect item and vice versa
                            isItemSelected ? false : true
                        isItemHovered ?
                                isItemSelected ?
                                    Constants.ClickToDeselectRegion :
            </Grid >

this is what I am trying to achieve on hover change color and show text for select or deselecting item

enter image description here

this is the example of lagging that I was talking about

cursor might not be visible but it is on Arlington while I was going
up from the bay city

enter image description here

the whole code snippet in case you wish to refer

note: it won’t work as I have not added redux here that would just complicate that small sample in case it is required let me know

link:Tree view hover

In case react state update is not the way for this please suggest any other way for this

Source: React – Stack Overflow

November 15, 2021
Category : News
Tags: material-ui | reactjs | treeview

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.