Почему при загрузке компонента не происходит вычисление ширины экрана?

Question

[luxurypluxury]

const [isLoading, setIsLoading] = useState(true);
    const [width, setWidth] = useState(0);
    const news = useSelector(newsItemsSelector);
    const dispatch = useAppDispatch();

    const breakpoint: number = 1350;

    const getWidth = () => {
            setWidth(window.innerWidth);
    }
    console.log(width);

    useEffect(() => {
        window.addEventListener('resize', getWidth);

        return () => window.removeEventListener('resize', getWidth);
    }, [])

P.S решил вроде указав в стейте window.innerWidth

Answer 1

[shtokol]

Не совсем понятна вот это запись const breakpoint: number = 1350;, что это за синтаксис такой?

Вот вам вариант кастомного хука

сам хук
import React, { useState, useEffect } from 'react';

// кастомный хук ширины и высоты экрана
export const useWindowSize = () => {
const [sizeWindow, setWindowSize] = useState([window.innerWidth, window.innerHeight]);

useEffect(() => {
const handlWidth = () => setWindowSize([window.innerWidth, window.innerHeight]);
window.addEventListener('resize', handlWidth);

return () => {
window.removeEventListener('resize', handlWidth);
}
});
return sizeWindow;
}

его использование
import './App.css';
import { useWindowSize } from './hooks/useWindowSize';

function App() {
const [widthWindow, heightWindow] = useWindowSize();

return (

ширина - {widthWindow}


высота = {heightWindow}

);
}

export default App;