Do you want to request a feature or report a bug?
Bug, maybe? Although thinking about it more makes me think I've misunderstood something.
What is the current behavior?scroll state variable updates in rendered output but not inside handleScroll event callback.
I reckon this might be due to the fact that when handleScroll is defined scroll is 0, but scroll is defined in the scope above and should be updated when the component is re-rendered.
import React, { useState, useEffect } from "react";
const Scroller = () => {
const [scroll, setScroll] = useState(window.scrollY);
const handleScroll = () => {
console.log(scroll); // scroll is always 0
setScroll(window.scrollY);
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []); // runs once
return <div id="scroll">{scroll}</div>; // scroll is correct
};
export default Scroller;
What is the expected behavior?scroll to be updated inside handleScroll event callback and in render output.
Which versions of React, and which browser / OS are affected by this issue?
chrome 70.0.3538.77
react 16.7.0-alpha.0 - next
react-dom 16.7.0-alpha.0 - next
TidyIQ, jdpigeon, tomekrozalski, coolSony, bradgreens and 54 more
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4