onClick react error Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

**I'm getting react Error while trying to change parent component styles onMouseEnter event. How could I change the styles via child component button? The error is - Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. That seems odd for onMouseLeave={() => setHovered(false)} is an arrow function.

https://codesandbox.io/s/trusting-moon-djocul ? **

 // App js import React, { useState, useEffect } from "react"; import Categories from "./Categories"; import ShopPage from "./components/Products"; export default function App() { const [data, setData] = useState(Categories); useEffect(() => { setData(data); }, []); return ( <div className="wrapper"> <ShopPage products={data} filterResult={filterResult} /> </div> ); } // Shopping page const ShopPage = ({ products }) => { return ( <> <div> <Products products={products} /> </div> </> ); }; // Parent component, the main part goes here const Products = ({products}) => { const [hovered, setHovered] = useState(false); const [style, setStyle] = useState(false); if (hovered) { setStyle({ // inline styles }); } else { setStyle({ // inline styles }); } return ( <> <Product setHovered={setHovered} style={style} products={products}/> </> ); }; export default Products; // Child component const Product = ({ setHovered, style, products }) => { return ( <div className={styles.items}> {products.map((value) => { return ( <> <div style={style}> <button onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} > Add to Cart </button> </div> </> ); })} </div> ); }; export default Product;

Answer 1

The issue is you are setting setHovered state in component, the simple solution could be to use it in useEffect and add required dependency.

If we talk about your code so you can easily do this by using the state in child component instead of passing through props.

I have updated your code below:

https://codesandbox.io/s/nameless-cookies-e6pwxn?file=/src/components/Product.js:141-151