using shouldComponentUpdate instead of getSnapshotBeforeUpdate

Hi, I'm struggling a little with the new lifecycles. I have this component which passes down a style which will lock the scrollbar on the window without shifting content when applied on my root App element.

interface ScrollLockProps {
  locked: boolean,
  children: (style?: CSSProperties) => React.ReactNode
}

export class ScrollLock extends React.Component<ScrollLockProps> {
  private scrollY = 0

  public shouldComponentUpdate() {
    if (!this.props.locked) {
      this.scrollY = window.scrollY
    }

    return true
  }

  public componentDidUpdate() {
    if (!this.props.locked) {
      window.scrollTo(0, this.scrollY)
    }
  }

  public render() {
    const { locked, children } = this.props

    const style: CSSProperties | undefined = locked ? {
      position: "fixed",
      left: "0px",
      right: "0px",
      top: `-${this.scrollY}px`,
    } : undefined

    return children(style)
  }
}

The problem is I have to use shouldComponentUpdate to retrieve the scroll position, and this feels wrong to me as this lifecycle surely should only return a boolean and not have any side effects?

I can't use getSnapshotBeforeUpdate because render is called before it, which means the resulting style will be incorrect.

And of course I cannot use componentWillReceiveProps because it is deprecated.
What is the correct way to go about this?

Issue cung cấp một component ScrollLock TypeScript inline thay vì nêu tên các tệp hoặc bài kiểm thử trong repository. Hãy bắt đầu bằng cách xem lại tài liệu về vòng đời của React cho shouldComponentUpdate, getSnapshotBeforeUpdate và componentDidUpdate; công việc được xem là hoàn tất khi cách tiếp cận vòng đời đúng cho trường hợp khóa cuộn này được xác lập và ghi lại.