React.js Hooks Set State Function From Event Listener

Question

Can you please explain why the following results in an infinite loop with the following error:

Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop.

import React from "react";
import { useState } from 'react';

function MyImageComponent(props) {
  const {
    images
  } = props;

  const [windowWidth, updateWindowDimensions] = useState(window.innerWidth);

  window.addEventListener('resize', updateWindowDimensions(window.innerWidth)); //error here


  return (
    <div>
    {windowWidth}
    </div>
  );

}

export default MyImageComponent;

I believe I can solve using the useEffect API but I don't understand conceptually what the problem is... it appears the render is being called multiple times because state is being set in a loop... but given the update function updateWindowDimensions is binded to an event listener which is not running infinitely I don't understand it.

To note: the error appears with or without a window resize.

window.addEventListener('resize', () => updateWindowDimensions(window.innerWidth)) — Alexander Staroselsky
– Alexander Staroselsky, Commented Sep 17, 2019 at 0:19

Alexander Staroselsky · Accepted Answer · 2019-09-17 00:31:30Z

2

Currently you are not handling the resize event handler correctly. The first argument of the resize event handler would be a resize event. Also you would pass a function to a handler rather than executing a function as a handler. Try the following instead:

window.addEventListener('resize', () => updateWindowDimensions(window.innerWidth))

Hopefully that helps!

answered Sep 17, 2019 at 0:31

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fyodor Yemelyanenko · Accepted Answer · 2019-09-17 00:40:26Z

2

@Alexander Staroselsky answer will solve your exact issue, but on each render window.addEventListener will be called and new event handler will be assigned to 'resize' event. So you'll quickly end up with hundreds of the same event listeners calling updateWindowDimensions(window.innerWidth) (You may see it by adding console.log(window.innerWidth) to callback).

I suggest to use useEffect with empty dependency list. So it will be called exactly once and bind one event listener to resize event.

useEffect(() => {
    window.addEventListener('resize', () => {
        updateWindowDimensions(window.innerWidth)
  })}, []);

answered Sep 17, 2019 at 0:40

Fyodor Yemelyanenko

11.9k2 gold badges33 silver badges41 bronze badges

2 Comments

Alexander Staroselsky Over a year ago

This is a great answer and important point. I’d take it one step further and add example of clean up (removing event listener) from the hook.

Summer Developer Over a year ago

Thank you for your clarification on the need for lifecycle methods.

Collectives™ on Stack Overflow

React.js Hooks Set State Function From Event Listener

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related