Trying to set window height but it gives an error in react.js

Question

I use useState to get the window height but it gives a runtime error saying that window is not defined. Do you know why

Here's the code:

let [winHeight,setWinHeight] = useState(window.innerHeight)

useEffect(() => {
          const list = []
          for (var i=0;i<datas.length;i++){
               const t = datas[i].title
               const res = handleResize(i + 2)
               list.push(<li ref={resl[i + 1]} style={{top: "20px",left: res + "px"}}><Anchor href={datas[i].link || `/${t.replace(/ /g, "_")}`}><a onClick={() => closeNav()} onMouseOver={() => setHovering(i)}>{t}</a></Anchor></li>)
          }
          setWinHeight(window.innerHeight)
          setLinks(list)
     }, [winHeight])

You want to take a look at this other answer, it should help you: https://stackoverflow.com/a/19014495/5460827 — LasaleFamine, Apr 03 '21 at 08:30
https://codesandbox.io/s/misty-framework-1y87c?file=/src/App.js:0-530 — DecPK, Apr 03 '21 at 08:34
I would suggest checking this out: https://usehooks.com/useWindowSize/ — TheMisir, Apr 03 '21 at 08:41

score 0 · Accepted Answer · answered Apr 03 '21 at 08:29

0

Have you tried adding window.height in useEffect's dependency array?

useEffect(() => {
      const list = []
      for (var i=0;i<datas.length;i++){
           const t = datas[i].title
           const res = handleResize(i + 2)
           list.push(<li ref={resl[i + 1]} style={{top: "20px",left: res + "px"}}><Anchor href={datas[i].link || `/${t.replace(/ /g, "_")}`}><a onClick={() => closeNav()} onMouseOver={() => setHovering(i)}>{t}</a></Anchor></li>)
      }
      setLinks(list)
 }, [window.innerHeight])

answered Apr 03 '21 at 08:29

Simran Bhake

117
8

tried it but it gives another error saying that window is not defined – Efe FRK Apr 03 '21 at 08:29
tried calling it with useState but nothing did change at all – Efe FRK Apr 03 '21 at 08:30
https://stackoverflow.com/a/19014495/11038519 you can try this solution – Simran Bhake Apr 03 '21 at 08:39
now my code does work, but the only thing that is left to do is to make it run initially. Since it only runs the code inside the useEffect hook when the window.innerHeight does change, it does not run initially – Efe FRK Apr 03 '21 at 08:47
1

Did it by calling the initial value with a returning function, thanks a lot for your help. I'm verifying this response – Efe FRK Apr 03 '21 at 08:51

score 0 · Answer 2 · answered Apr 03 '21 at 08:34

0

Try this:

let [winHeight,setWinHeight] = useState(0)

useEffect(()=> {
setWinHeight(window.innerHeight)
},[])

And also you need to import useEffect from 'react'.

window isn't defined because the component isn't renderer at the point you are trying to access window object.

answered Apr 03 '21 at 08:34

henrip

120
1
1
9

Now I don't get the error, but my code inside the useEffect doesn't work. I'm updating the quistion now so you'll get what I mean. – Efe FRK Apr 03 '21 at 08:37
here is a working example https://stackblitz.com/edit/react-ts-hx1snp?file=index.tsx – henrip Apr 03 '21 at 09:03

zixiCat · Answer 3 · 2021-04-03T08:51:36.247

0

Are you running on RN? Then you can try this to get the height~

import { Dimensions } from 'react-native';

const windowHeight = Dimensions.get('window').height;

Last Post

Add the resize event listener

Following this one, it would update the winHeight when you change height of window

  const lastHeight = useRef(window.innerHeight);

  const [winHeight, setWinHeight] = useState(lastHeight.current);

  useEffect(() => {
    window.addEventListener('resize', (e) => {
      const curHeight = e.currentTarget?.innerHeight;
      if (lastHeight.current !== curHeight) {
        lastHeight.current = curHeight;
        setWinHeight(curHeight);
      }
    });
  }, []);

edited Apr 03 '21 at 08:51

answered Apr 03 '21 at 08:38

zixiCat

1,019
1
5
17

1

Window itself is undefined, so nothing can be called that contains the window object – Efe FRK Apr 03 '21 at 08:39
so resizing does not work – Efe FRK Apr 03 '21 at 08:39

score 0 · Answer 4 · answered Apr 03 '21 at 08:43

0

use [window.innerHeight] not [winHeight] inside dependency Array of UseEffect

answered Apr 03 '21 at 08:43

Aryan Singh

66
4

Trying to set window height but it gives an error in react.js

4 Answers4