setState hook not updating

Question

I have a header that I want to hide on scroll down and show on scroll up.
To do that, I saved the scrolling position as prevScrollPos in the state to compare it to the current scrolling position onscroll, and then update prevScrollPos to the current:

 const [visible, setVisible] = React.useState(true); const [prevScrollPos, setPrevScrollPos] = React.useState(window.pageYOffset); const handleScroll = () => { const scrollPos = window.pageYOffset; const visible = scrollPos < prevScrollPos; setVisible(visible); setPrevScrollPos(scrollPos); }

The problem is that, for some reason PrevScrollPos doesn't get updated.
Pen: https://codepen.io/moaaz_bs/pen/jgGRoj?editors=0110

When you add the scroll handler then handle scroll function is bind to the first prevScrollPos value. See this answer to solve your problem stackoverflow.com/questions/55265255/… — Prakash Sharma
– Prakash Sharma, Commented Aug 4, 2019 at 8:17

grenzbotin · Accepted Answer · 2019-08-04 08:49:32Z

You need to modify your useEffect function:

 React.useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; });

Basically you don't have access to prevScrollPos in your handler, therefore prevScrollPos inside the listener will always return 0. To solve this, the dependency array should not be present.

-> + Do not forget to remove the event listener after adding it. :-)

Thank you so much! It worked. Do I need to remove the event listener event if the component will never unmount?
Now, you need to remove it since the event listener gets added with each render. And we need to have it because we want to be aware of the current prevScrollPos - otherwise we won't (as you saw). But in general, I would always make sure to remove the event listeners anyway, yes.

Merci Dieu KIMPOLO · Accepted Answer · 2019-08-04 08:33:15Z

Can you try this:

 const [visible, setVisible] = React.useState(true); const [prevScrollPos, setPrevScrollPos] = React.useState(window.pageYOffset); const handleScroll = () => { const scrollPos = window.pageYOffset; const visible_new = scrollPos < prevScrollPos; setVisible(visible_new); setPrevScrollPos(scrollPos); }

I thought that the problem concerned the visible variable which represents the state and which it seems to me is not correctly modified here: const visible = scrollPos <prevScrollPos; it's better to use another variable at this level

Collectives™ on Stack Overflow

setState hook not updating

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related