You need to observe window size changing and put this value to state.

    const [width, setWidth] = useState(0)
    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth)
        window.addEventListener('resize', onResize);
        return () => {
            window.removeEventListener("resize", onResize)
        }
    }, [setWidth])

    //and then
    useEffect(() => {
        console.log("am called");

        if (width< 800) {
            document.getElementsByTagName("body")[0].style.display = "none";
        } else {
            document.getElementsByTagName("body")[0].style.display = "block";
        }


    }, [width]);

better solution

export default function useMatchMedia(condition) {
    const [isMatching, setIsMatching] = useState(false);

    useEffect(
        function updateMatchMedia() {
            if (!condition) return setIsMatching(true);

            const updateIsMatching = (event) => setIsMatching(event.matches);

            const matcher = window.matchMedia(condition);

            setIsMatching(matcher.matches);

            matcher.addEventListener('change', updateIsMatching);

            return () => {
                matcher.removeEventListener('change', updateIsMatching);
            };
        },
        [condition]
    );

    return [isMatching];
}

then you can use it

   isTablet = useMatchMedia(`(max-width: 800px)`);
   useEffect(() => {
     if(isTablet){
     } else {
     }
   }, [isTablet])