Как сделать исчезающую/появляющуюся стрелочку «вверх» на React?

Question

[Даниил Сугоняев]

Неожиданно для себя столкнулся с такой проблемой. Как на React сделать банальную вещь - при достижении определенного отступа от верха страницы появляется стрелочка "вверх". То есть понятно что можно по условию обновлять state, но как можно реализовать без постоянного перерендеривания 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() { /* ... */ }
}