React JS: do something on window scroll and conditional render on window size

conditionalRenderWindowSize.jsx

export default function Footer() {

    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        window.onresize = () => {
            setWidth(parseInt(window.innerWidth));
        }
    }, []);

//     return (
//         <>
//             {
//                 // window.innerWidth doesn't rerender
//                 width >= 1024
//                 ? <DesktopFooter />

//                 : <MobileFooter />
//             }
//         </>
//     );
}

onScroll.jsx

function Component () {
  const [navChange, setNavChange] = useState(false);

   // https://stackoverflow.com/a/61018017 alt: https://www.youtube.com/watch?v=JMsNslI8KoY
  useEffect(() => {
      window.onscroll = () => {
          setNavChange(window.scrollY >= 80)
      }
  }, []);
  
//   return (
//     <>
//       <div className={`header-section ${navChange ? "active" : ""}` }>
//         <p> navbar </p>
//       </div>
//     </>
//   );
}