Hooks vs class component

ScrollIntoView.tsx

export const ScrollIntoView: React.FC<IProps> = memo(
  withRouter<IWithRouterProps, React.FC<IWithRouterProps>>(
    ({ id, className, children, top, location }) => {
      const ref = useRef<HTMLDivElement>(null);

      useEffect(() => {
        if (location.hash === `#${id}` && ref.current) {
          ref.current.scrollIntoView();
        }
      }, [location]);

      return (
        <Container id={id} className={className} top={top} ref={ref}>
          {children}
        </Container>
      );
    }
  )
);

class ScrollIntoViewClass extends React.Component<IWithRouterProps> {
  private ref = React.createRef<HTMLDivElement>();

  scrollIntoViewIfRequested = () => {
    const { id, location } = this.props;
    if (location.hash === `#${id}` && this.ref.current) {
      this.ref.current.scrollIntoView();
    }
  };

  componentDidMount() {
    this.scrollIntoViewIfRequested();
  }

  componentDidUpdate(prevProps: IWithRouterProps) {
    if (prevProps.location.hash !== this.props.location.hash) {
      this.scrollIntoViewIfRequested();
    }
  }

  render() {
    const { id, className, children, top } = this.props;
    return (
      <Container id={id} className={className} top={top} ref={this.ref}>
        {children}
      </Container>
    );
  }
}

export const ScrollIntoView: React.ComponentClass<IProps> = withRouter(
  ScrollIntoViewClass
);