Search code examples
cssreactjshoverjsxstyled-components

Best practice for React. Hover or mouseEnter/mouseLeave?

I'm learning React with styled components and I have a button with a simple hover-effect.

This hover-effect can be created in the styled components file with &:hover, and in my jsx file, I can use onMouseEnter. Both will work.

I have searched google to find what is considered as best practice, but no luck, so I try here. Anyone?

Solution

  • It's very simple choice.

    If you need change styles then use ":hover". You can pass props to styled component for change styles in depend of some condition.

    If you need realize some logic on hover then use event handler for onMouseLeave, onMouseEnter, onClick and other events.

    Use event handler for realize some logic. As example when you have some element and you handle "onMouseLeave", in mouseleave event handler you change something, from what depend other components. For this need use onMouseLeave.

    I recommend use styles for simple styling things. Don't use javascript for simple styling thing as example for make blue color on hover, for that simple thing use CSS.