Javascript "React Js中避免组件渲染的方法"

我已经制作了一个Reaction应用程序，以下是我的代码和三个组件:

App.js个

import React from "react";
import "./App.css";
import mediumCompo from "./mediumCompo";
import ldComp from "./Components/ldComp";
 
function App() {
  const viewportContext = React.createContext({});

  const ViewportProvider = ({ children }) => {
    const [width, setWidth] = React.useState(window.innerWidth);
    const [height, setHeight] = React.useState(window.innerHeight);
    const handleWindowResize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };

    React.useEffect(() => {
      window.addEventListener("resize", handleWindowResize);
      return () => window.removeEventListener("resize", handleWindowResize);
    }, []);

    return (
      <viewportContext.Provider value={{ width, height }}>
        {children}
      </viewportContext.Provider>
    );
  };

  const useViewport = () => {
    const { width, height } = React.useContext(viewportContext);
    return { width, height };
  };

  const MyComponent = () => {
    const { width } = useViewport();
    const breakpoint = 900;
    return width < breakpoint ? <mediumCompo/> : <ldComp/>;
  };
  return (
    <>
      <h1>Hello</h1>
      <ViewportProvider>
        <MyComponent />
      </ViewportProvider>
    </>
  );
}

export default App;

ldComp.jsx个

import React from 'react'

const ldComp = ( 
        <>
        <h1>LD</h1>
        </>
     );
export default ldComp;

mediumCompo.jsx个

import React from 'react'

function mediumCompo() {
    return ( 
        <>
        <h1>MD</h1>
        </>
     );
}

export default mediumCompo;

当我放大/缩小时，我在渲染网站中看不到这个.

几天前我确实做了这样的网站，我从那里复制了我的代码， 此外，2小时前它还运行良好，但现在我能看到的主要问题是:

正如你所看到的，无论我把我的组件放在哪里，它永远不会被使用！！ 我甚至试着在我的App.js中恰好在<h1>Hello</h1>岁之后使用这个 还是不管用！