responsive.jsx

import React from "react";

const debounce = (func, delay) => {
  let inDebounce;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(inDebounce);
    inDebounce = setTimeout(() => func.apply(context, args), delay);
  };
};

export class Responsive extends React.Component {
  elem = React.createRef();
  width;

  state = {
    size: "initial",
    content: null
	};
	
  resize = debounce(this.compose, 150);

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

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

  compose = () => {
    let size, content;

    const width = this.elem.current.clientWidth;

    if (width < 340) {
      size = "xs";
    } else if (width < 400) {
      size = "s";
    } else if (width < 460) {
      size = "m";
    } else {
      size = "l";
    }

    if (this.state.size === size) {
      return;
    }

    switch (size) {
      case "s":
        content = <div>small</div>;
        break;
      case "m":
        content = <div>medium</div>;
        break;
      case "l":
        content = <div>large.</div>;
        break;
    }

    this.setState({
      size: size,
      content: content
    });
  };

  render() {
    return <div ref={this.elem}>{this.state.content}</div>;
  }
}