React Hook "useState" is called conditionally

user_7868680 0
Viewed 528

React is complaining about code below, saying it useState and useEffect are being called conditionally. The code work's fine without typescript:

import React, { useState, useEffect } from "react";

const useScrollPosition = () => {
  if (typeof window === "undefined") return 500;

  // Store the state
  const [scrollPos, setScrollPos] = useState(window.pageYOffset);

  // On Scroll
  const onScroll = () => {
  setScrollPos(window.pageYOffset);
};

  // Add and remove the window listener
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  });
};

export default useScrollPosition;
use-state use-effect typescript reactjs
2 Answers

You have an early return so it is being called conditionally if (typeof window === "undefined") return 500;

You need to move the hooks before the early return. For a detail explanation read this https://reactjs.org/docs/hooks-rules.html

user_10307300

move the return to bottom of function and pass empty array to second parameter of useEffect for exists code in the useEffect run only once time.

import React, {useState, useEffect} from "react";

const useScrollPosition = () => {
    

    // Store the state
    const [scrollPos, setScrollPos] = useState(window.pageYOffset);

    // On Scroll
    const onScroll = () => {
        setScrollPos(window.pageYOffset);
    };

    // Add and remove the window listener
    useEffect(() => {
        window.addEventListener("scroll", onScroll);
        return () => {
            window.removeEventListener("scroll", onScroll);
        };
    }, []); // set an empty array for run once existing code in the useEffect

   return typeof window === "undefined" ? return 500 : <></>; // a value must be returned
    
};

export default useScrollPosition;
user_103381750
Related