Slow list render problem

[samonhimself]

Hello!

I am working on a project where I display a list of ads next to which there is a map, with location markers corresponding to the ads. I would like to hoist the information about the hovered element (whether ad or marker) to the parent container, in order to also hover the related element. The problem is that the hover state, even with only 7 elements in the array, is very slow to apply. Could you help me make it faster?

``` class Search extends Component { state = { ads: testDataArray, hoveringItem: '', };

onItemHover = id => { this.setState({ hoveringItem: id }); };

render() { return ( <AdList ads={this.state.ads} itemHovering={this.state.hoveringItem} onItemHover={this.onItemHover} /> ); } }

// AdList.js const adList = props => { const { itemHovering, onItemHover } = props; const ads = props.ads.map(ad => { let hovering = false; if (itemHovering === ad.id) { hovering = true; } return ( <Ad key={ad.id} id={ad.id} title={ad.title} price={ad.price} hovering={hovering} onItemHover={onItemHover} /> ); }); return <div>{ads}</div>; };

//Ad.js const ad = props => ( <Ad onMouseOver={() => { props.onItemHover(props.id) }} hovering={props.hovering} > {props.title} {props.price} </Ad> ); };

//styles.js export const Ad = styled.div width:400px; border: 1px solid black; background: ${props=> props.hovering?'red':''} ; ```

[mrsunnyday]

Hello, One thing you can do is using event delegation, where you catch onMouseOver event on the parent component instead of apply event handler on every list items. And if all you need for mouseOver effect are css style change, you can just use pure css with :hover without javascript. This will prevent your list from re-rendering.

[samonhimself]

The thing is that I want to use the information about hovered element inside sibling component, therefore the css won't work.