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?

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?

• javascript
• html
• css
• reactjs

• 2 You can't just put any random variable there; it has to be something that would trigger your component to re-render -- in other words, either a state or prop variable. – Herohtar Commented Sep 1, 2019 at 2:17
• so how can I track every time screen size changed? – panji gemilang Commented Sep 1, 2019 at 2:20
• developer.mozilla.org/en-US/docs/Web/API/Window/resize_event – Herohtar Commented Sep 1, 2019 at 2:26
• Hi Panji, check my solution and let me know if that helps. – ravibagul91 Commented Sep 1, 2019 at 2:56
• 1 I'll try your answer when I get home. – panji gemilang Commented Sep 1, 2019 at 3:31

1 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