Cleaner Efficient Code with Hooks and Functional Programming - Wrapper Hell issue - Media component using render props

Media.jsx

import React from "react";

export default class Media extends React.Component {
  removeListener = () => null;

  constructor(props) {
    super(props);
    this.state = {
      matches: window.matchMedia(this.props.query).matches
    };
  }

  componentDidMount() {
    this.init();
  }

  init() {
    const media = window.matchMedia(this.props.query);
    if (media.matches !== this.state.matches) {
      this.setState({ matches: media.matches });
    }

    const listener = () => this.setState({ matches: media.matches });
    media.addListener(listener);
    this.removeListener = () => media.removeListener(listener);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.query !== this.props.query) {
      this.removeListener();
      this.init();
    }
  }

  componentWillUnmount() {
    this.removeListener();
  }

  render() {
    return this.props.children(this.state.matches);
  }
}