2

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])
Improve this question
5

4 Answers 4

Reset to default
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])
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

tried it but it gives another error saying that window is not defined
tried calling it with useState but nothing did change at all
stackoverflow.com/a/19014495/11038519 you can try this solution
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
Did it by calling the initial value with a returning function, thanks a lot for your help. I'm verifying this response
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.

Improve this answer

2 Comments

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.
here is a working example stackblitz.com/edit/react-ts-hx1snp?file=index.tsx
0

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

Improve this answer

Comments

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);
      }
    });
  }, []);
Improve this answer

2 Comments

Window itself is undefined, so nothing can be called that contains the window object
so resizing does not work

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.