You are passing a new toggleHamburger
prop every time.
In fact this is the most common performance killer in React apps I have seen. Passing a new closure as an event handler / callback each time.
To solve this issue, I would recommend the useCallback()
hook, or, in your case a method, as the outer component is a class:
class ... {
toggleHamburger = () => this.setState(({toggle}) => ({toggle: !toggle}));
...
<HamburgerButton toggleHamburger={this.toggleHamburger} />
}
A component wrapped with React.memo()
will only render once if called with the same props:
const Comp = React.memo(props => {
console.log('Rendering...');
return props.a;
});
const props = {a: 1};
const at = document.getElementById('app');
render();
render();
render();
function render() {
console.log('Called render()');
ReactDOM.render(<Comp {...props} />, at);
}
<div id="app"></div>
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>