ReactJS useEffect not rendering after dependency changed

Question

So I'm currently working with React Hooks, and I'm trying to use useEffect. It supposed whenever that dependencies changed, the useEffect would re-render right? But it doesn't work for me. Here's my code :

const [slidesPerView, setSlidesPerView] = React.useState(0)

  React.useEffect(() => {
    setSlidesPerView(() => (window.innerWidth <= 375 ? 1 : 2))
    console.log("rerender?", slidesPerView)
  }, [window.innerWidth])

Everytime I changed the screen size, useEffect won't re-render. I wonder what did I do wrong?

Answer 1

useEffect will respond to either props changes or state changes.

Every time screen size changes component has no idea, if window.innerWidth is changed or not, because it is not in a state or props.

To get it working you need to store window.innerWidth into state, and attach a event listener to your window, whenever window size changes it will get the window.innerWidth and store it into the state, and as state changes your useEffect will get re-run, and finally your component will get re-render.

const [size, setSize] = React.useState(window.innerWidth)


React.useEffect(() => {
    //Attach event on window which will track window size changes and store the width in state
    window.addEventListener("resize", updateWidth);

    setSlidesPerView(() => (size <= 375 ? 1 : 2));
    console.log("rerender?", slidesPerView);

    //It is important to remove EventListener attached on window.   
    return () => window.removeEventListener("resize", updateWidth);
}, [size])

const updateWidth = () => {
    setSize(window.innerWidth)
}

Demo