React Hooks：状态总是设置回初始值

Question

Switching over to react hooks and using them for the first time. My state always seems to be set back to the initial value I pass it (0). Code is to have a page automatically scroll down and up. The page is just practice to displaying various file types. What happens is the scrollDir variable will switch to being set to either 1 or -1 and 0. So the console will display 1,0,1,0,1,0,1,0 etc... How do I get the state to stay during an update?

function App(props) {

  const [scrollDir, setScrollDir] = useState(0);

  function scrollDown() {
    if(document.documentElement.scrollTop < 10)
    {
      setScrollDir(1);
    }
    else if(document.documentElement.scrollTop >= document.documentElement.scrollHeight - window.innerHeight)
    {
      setScrollDir(-1);
    }

    window.scrollBy(0, scrollDir);
  }

  useEffect(() => {
    setInterval(scrollDown, 100);
  });

  return (
    <StackGrid monitorImagesLoaded={true} columnWidth={"33.33%"} >
      <img src={posterPNG} />
      <img src={posterJPG} />
      <img src={posterGIF} />
      <video src={posterMP4} loop autoPlay muted />
      <Document file={posterPDF}>
        <Page pageNumber={1} />
      </Document>
    </StackGrid>
  );
}

Answer 1

useEffect hook takes second argument, an array. If some value in that array changes then useEffect hook will run again

If you leave that array empty useEfect will run only when component mount - (basicaly like ComponentDidMount lifecycle method)

And if you omit that array useEffect will run every time component rerenders

For example:

useEffect runs only once, when component mounts:

useEffect(() => {
 //code 
},[]);

useEffect runs everytime when component rerenders:

useEffect(() => {
 //code 
});

useEffect runs only when some of these variables changes:

let a = 1;
let b = 2;
    useEffect(() => {
     //code 
    },[a,b]);

Also, if you set return statement in useEffect hook, it has to return a function, and that function will always run before useEffect render

  useEffect(() => {
    // code
    return () => {
      console.log("You will se this before useEffect hook render");
    };
  }, []);

Answer 2

Using setInterval with hooks isn't very intuitive. See here for an example: https://stackoverflow.com/a/53990887/3984987 . For a more in-depth explanation you can read this https://overreacted.io/making-setinterval-declarative-with-react-hooks .

This useInterval custom hook is pretty easy to use as well https://github.com/donavon/use-interval . (It's not mine - I ran across this after responding earlier)