Общий параметр в зависимости от медиа-запроса

function Books({ pageLimit }) {
  return <div>{pageLimit}</div>;
}

class App extends React.Component {
  state = {
    pageLimit: window.innerWidth < 720 ? 4 : 10
  };

  componentDidMount() {
    window.addEventListener("resize", this.resize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.resize);
  }

  resize = () => {
    this.setState({ pageLimit: window.innerWidth < 720 ? 4 : 10 });
  };

  render() {
    return <Books pageLimit = {this.state.pageLimit} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id = "root"></div>