I try to use react hooks instead of class-based components and have some problem with performance.

Code:

import React, { memo, useCallback, useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; let counter = -1; function useToggle(initialValue) { const [toggleValue, setToggleValue] = useState(initialValue); const toggler = useCallback(() => setToggleValue(!toggleValue), [ toggleValue, setToggleValue ]); return [toggleValue, toggler]; } const Header = memo(({ onClick }) => { counter = counter + 1; return ( <div> <h1>HEADER</h1> <button onClick={onClick}>Toggle Menu</button> <div>Extra Render: {counter}</div> </div> ); }); const Dashboard = memo(() => { const [visible, toggle] = useToggle(false); const handleMenu = useCallback( () => { toggle(!visible); }, [toggle, visible] ); return ( <> <Header onClick={handleMenu} /> <div>Dashboard with hooks</div> {visible && <div>Menu</div>} </> ); }); export default Dashboard;

Here is an example of what I wanna do: Example.

As you see, there are extra renders in my Header component. My question: Is it possible to avoid extra renders to use react-hooks?