如何在useEffect中使用useState？

Question

I try to refacto my compoenent from react.component to hooks but I got some troubles. I don't really understand how to use my state offsetTop . The value is set, or not when I need.

First try:

const [offsetTop, setOffsetTop] = useState();

useEffect(() => {
    setOffsetTop(window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top)
    console.log(offsetTop);
    window.addEventListener('scroll', handleScroll, true)
    return () => window.removeEventListener("scroll", handleScroll);
}, []);

I also tried to use it with a second method useEffect with [offsetTop] as a second parameters but my log showed up twice with undef and the value. I understand why it shows twice, but still doesn't solve my problem, my condition does not work.

Second try:

const [offsetTop, setOffsetTop] = useState();

useEffect(() => {
    setOffsetTop(window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top)
}, []);

useEffect(() => {
    console.log(offsetTop);
    window.addEventListener('scroll', handleScroll, true)
    return () => window.removeEventListener("scroll", handleScroll);
}, [offsetTop]);

handleScroll function:

function handleScroll() {
    console.log(offsetTop);
    const scrolledY = window.scrollY
    if (scrolledY > offsetTop) console.log("works")
}

The same code as the First try: placed in componentDidMount() {} and using this works fine. So it is not the condition that is bad. It's about when the value is set and how useState and useEffect works.

Answer 1

Doesn't your condition work in the first variant? That one looks correct, and console.log(offsetTop) in that case is not supposed to print the newly set value, but the previously set value. To log it like you want you need:

const [offsetTop, setOffsetTop] = useState();

useEffect(() => {
    setOffsetTop(window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top)
    window.addEventListener('scroll', handleScroll, true)
    return () => window.removeEventListener("scroll", handleScroll);
}, []);

useEffect(() => {
    console.log(offsetTop);
}, [offsetTop]);

The problem with your second try is that it does the following:

• First render:
  • 1st useEffect sets new offsetTop
  • 2nd useEffect fires with old offsetTop
• offsetTop update causes re-render
  • 2nd useEffect does clean-up, removing the event listener
  • I guess, somewhere here browser propagates event, with your listener gone
  • 2nd useEffect fires second time, with new offsetTop , and sets your listener again (but it already missed the event)

Ah... that's only a part of your problem.

The second part of your problem is that handleScroll() effectively captures offsetTop value from the render cycle where it was created and set as the listener. You should use useRef() to keep handleScroll() in-sync with the current value (and if you don't need offsetTop for other reasons, you don't need to use the state at all. You can do:

const { current: heap } = useRef({
  offsetTop: 0,
});

useEffect(() => {
  function handleScroll() {
    console.log(heap.offsetTop);
    const scrolledY = window.scrollY
    if(scrolledY > heap.offsetTop) console.log("works")
  }
  heap.offsetTop = window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top;
  window.addEventListener('scroll', handleScroll, true)
  return () => window.removeEventListener("scroll", handleScroll);
  // The heap is guaranteed to be the same object across re-renders,
  // thus including it into dependencies below does not cause useEffect
  // to recompute. However, if you don't include it, and rely on ESLint
  // to check code errors, it will complain about heap not being there
  // as missing dependency.
}, [heap]);

This way, offsetTop is persistent across re-renders, and handleScroll() always uses the current value. And if you need also re-render on offsetTop updates, then you can additionally use useState() to trigger re-renders (say to also inject offsetTop values into rendered components.

Answer 2

This strikes me as a case where you may not need state at all. Why not derive the value of offsetTop as needed?

useEffect(() => {
  function handleScroll() {
    const scrolledY = window.scrollY;
    const offsetTop = window.pageYOffset + document.querySelector(".projectsContainer").getBoundingClientRect().top;
    if(scrolledY > offsetTop) console.log("works")
  }

  window.addEventListener('scroll', handleScroll, true)
  return () => window.removeEventListener("scroll", handleScroll, true);
}, []);

---

However, maybe the idea is that you want to capture the initial value of offsetTop and then use it as things change. In that case, I think your main problem is due to removeEventListener not being cleaned up correctly because you're not passing the same parameters as those given to addEventListener (missing true ). Because of that, there is still an instance of handleScroll holding the initial value of offsetTop from the first render, and I think that's why you're seeing undefined being logged.

Wrong ❌

useEffect(() => {
  setOffsetTop(window.pageYOffset +
      document.querySelector(".projectsContainer").getBoundingClientRect().top;);
}, []);

useEffect(() => {
  // The first time this useEffect runs, the value of `offsetTop`
  // is still the initial value of undefined.
  function handleScroll() {
    console.log(offsetTop)
    const scrolledY = window.scrollY;
    if (scrolledY > offsetTop) console.log("works");
  }

  window.addEventListener("scroll", handleScroll, true);
  // This doesn't get removed correctly
  // because you don't pass the same parameters (missing `true`)
  return () => window.removeEventListener("scroll", handleScroll); 
}, [offsetTop]);

Right ✅

useEffect(() => {
  setOffsetTop(window.pageYOffset +
      document.querySelector(".projectsContainer").getBoundingClientRect().top;);
}, []);

useEffect(() => {
  function handleScroll() {
    const scrolledY = window.scrollY;
    if (scrolledY > offsetTop) console.log("works");
  }

  window.addEventListener("scroll", handleScroll, true);
  return () => window.removeEventListener("scroll", handleScroll, true);
}, [offsetTop]);

Reproduction: https://codesandbox.io/s/so-67247616-pl455