Cleaner Efficient Code with Hooks and Functional Programming - Fixing Wrapper Hell with hooks - Render props replaced by custom hooks

App.jsx

import React from "react";
import useMedia from "./hooks/useMedia";

function App() {
  let small = useMedia("(max-width: 480px)");
  let large = useMedia("(min-width: 1024px)");
  return (
    <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>
  );
}

export default App;