React imported component is not working completely

Question

I'm really new to React and I've been trying for some time now to make a scroll to top function. Using the existing tutorials and everything on google i've made this component :

Import React, { useState, useEffect } from "react";


export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false)

const toggleVisibility = () => {
    if(window.pageYOffset > 300) {
        setIsVisible(true);
    } else {
        setIsVisible(false);
    }
};

const ScrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

useEffect(() => {
    window.addEventListener('scroll', toggleVisibility);

    return () => {
        window.removeEventListener('scroll', toggleVisibility);
    };
}, []);

if (!isVisible) {
    return false
}

return (
<button className="button" onClick={ScrollToTop}>
    <div className="button__arrow button__arrow--up"></div>
</button>
)
};

the problem is that when i import it in the App.js it doesn't work properly, the scrolling part works perfectly, but the button it just stays at bottom of the page instead of appearing after a certain amount of scroll. This is the App.js:

return (
<div>
  {loading ? (
    <h1>Loading...</h1>
  ) : (
    <>
    <Navbar />
      <div className="Grid-container">
        {pokemonData.map((pokemon, i) => {
          return <Card key={i} pokemon={pokemon} />;
        })}
      </div>
    <ScrollToTop/>
    </>
  )}
</div>
);
}

This is a not a good idea. You're binding state updates to a scroll event, which will have really bad performance problems. You should [debounce](https://stackoverflow.com/a/12009497/4633197) the state updates. — yaakov, Dec 29 '21 at 14:12
Also, on the first render, the button will always appear because you're initializing the `isVisible` state as `false` — yaakov, Dec 29 '21 at 14:13

score 0 · Answer 1 · answered Dec 30 '21 at 09:10

I don't see any overt issues in your ScrollTop implementation that would cause the scroll-to-top button to remain on the page even after scrolling back to the top, but I do see room for optimization.

For onScroll events it's best to use passive listeners.
Invoke toggleVisibility once immediately in the mounting useEffect to ensure proper initial state.
Apply Boolean Zen to the visibility toggler; Update the isVisible state with the result of the boolean comparison.
Just conditionally render the button in a single return.

Code:

function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(window.pageYOffset > 300);
  };

  const ScrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  useEffect(() => {
    toggleVisibility();

    window.addEventListener("scroll", toggleVisibility, { passive: true });

    return () => {
      window.removeEventListener("scroll", toggleVisibility, { passive: true });
    };
  }, []);

  return isVisible ? (
    <button className="button" onClick={ScrollToTop}>
      <div className="button__arrow button__arrow--up">TOP</div>
    </button>
  ) : null;
}

If you're still having issues with your implementation and usage try to create a codesandbox that reproduces the issue that we can inspect and debug live.

React imported component is not working completely

1 Answers1