How to make an up/down arrow appear/disappear in React?

Question

JavaScript

Unexpectedly, I encountered such a problem. How to do a banal thing in React - when a certain indent from the top of the page is reached, an "up" arrow appears. That is, it is clear that it is possible to conditionally update the state, but how can it be implemented without constant re-rendering of the dom?

Answer 1

class ArrowUp extends Component {
  state = {
    isVisible: false,
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    if (window.scrollY >= SOME_VALUE  && !this.state.isVisible) {
      this.setState({ isVisible: true });
    } else if (window.scrollY < SOME_VALUE && this.state.isVisible) {
      this.setState({ isVisible: false });
    }
  };

  render() { /* ... */ }
}