Cleaner Efficient Code with Hooks and Functional Programming - Wrapper Hell issue - Typical render props usage

App.jsx

import React from "react";
import Media from "./components/Media";

function App() {
  return (
    <Media query="(max-width: 480px)">
      {small => (
        <Media query="(min-width: 1024px)">
          {large => (
            <div className="media">
              <h1>Media</h1>
              <p>{small ? "small screen" : "not a small screen"}</p>
              <p>{large ? "large screen" : "not a large screen"}</p>
            </div>
          )}
        </Media>
      )}
    </Media>
  );
}

export default App;