onMouseEnter onMouseLeave Error: Too many re-renders react

Question

so This is my first component where I decelerate my routes. And I decided to make two navigation items. And made some styling. But i get the error to many re-renders. Because I try to add styling with hover effect. I don't want to use css. This is my code:

import React, { useState } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Products from './Screens/ProductsList';
import Preview from './Screens/Product';
import ProductCreate from './Screens/ProductCreate';
import ProductEdit from './Screens/ProductEdit';
import Home from './Screens/Home';

function App() {
  const [hover, setHover] = useState(false);
  return (
    <BrowserRouter>
      <div style={style.navigationContainer}>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products"
        >
          Products List
        </Link>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products/create"
        >
          Create Product
        </Link>
      </div>

      <Switch>
        <Route
          key="edit-product"
          path="/products/:id/edit"
          component={ProductEdit}
        ></Route>
        <Route
          key="add-product"
          path="/products/create"
          component={ProductCreate}
        ></Route>
        <Route key="preview" path="/products/:id" component={Preview}></Route>
        <Route key="products" path="/products" component={Products}></Route>
        <Route exact path="/" component={Home}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

can I just ask why you want to use JS instead of CSS for this task? when CSS would be much the preferred option for performance reasons and code simplicity — Red Baron, Jun 10 '20 at 06:38
I like all in one place, and i need to make styling only for few items, so I don't want to create css file. — Emilis, Jun 10 '20 at 06:56
have you used `styled-components` before? They make life super easy, code is super readable and no impact on performance in the same way doing it in pure JS might have — Red Baron, Jun 10 '20 at 06:57

Yousaf · Accepted Answer · 2020-06-10T06:50:54.390

9

You need to pass a function to onMouseEnter and onMouseLeave that will call setHover function whenever those events are triggered

Change

onMouseEnter={setHover(true)}
onMouseLeave={setHover(false)}

to

onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}

Doing onMouseEnter={setHover(true)} will immediately call the setHover function and update the state instead of waiting for the onMouseEnter event. Consequently, your code is stuck in an infinite cycle of update state and re-render

Although, if you just want to apply some style on any element on hover, then doing it with CSS is much better than what you are trying to do. There's no need to re-render the component, when it is hovered on, just to update its style.

Also keep in mind that, since you are applying style to both Link components when hover is true, if you hover over one of the Link component, it will set hover to true and both Link components will be styled.

edited Jun 10 '20 at 06:50

answered Jun 10 '20 at 06:39

Yousaf

27,861
6
44
69

1

this is a good answer and I will upvote as it answers the OP question. I would highly advise the OP to use CSS though as for this task it makes more sense for a number of reasons – Red Baron Jun 10 '20 at 06:44
1

@RedBaron i agree, i have mentioned this in my answer. – Yousaf Jun 10 '20 at 06:45
Thanks worked out. Forgot about function call. – Emilis Jun 10 '20 at 06:53

Pierre Monier · Answer 2 · 2020-06-10T07:01:39.087

3

You need to trigger the function on event like this onMouseOver={() => {setHover(true}} sandbox here but with your technique you will have both link change when one is hover

edited Jun 10 '20 at 07:01

answered Jun 10 '20 at 06:46

Pierre Monier

599
2
9

onMouseEnter onMouseLeave Error: Too many re-renders react

2 Answers2