在自定义钩子中使用 nextjs 进行无效的钩子调用

Question

I'm getting a invalid hook call error when using state inside my custom hook. Here's my code

import { useState } from 'react';

export default function useFetch() {
  const [randomValue, setRandomValue] = useState<number>();
  setRandomValue(3);

  return randomValue;
}

the hook is inside my hooks folder on the path: ./src/hooks

any reason for that?

Answer 1

Your comment mentions you call useFetch() from inside useEffect() . That's where your problem is.

Hooks are only valid when called during render of a component. useEffect() is triggered after a render. So you cannot call any hook from inside useEffect .

It's hard to advise how to fix that since you haven't posted that code.

---

Also, and this is equally important, never call a state setter function during render. And remember that hook functions run when the component renders. Setting state triggers a render, so this typically results in an infinite loop.

Most of time when fetching a value and setting it in state, you should have a valid initial value for its type (like null ), and a useEffect() to set something you want.

Remember that useEffect means "use side effect" where a side effect is something that a render may trigger, but is not executed synchronously every single render.

export default function useFetch() {
  const [randomValue, setRandomValue] = useState<number | null>(null);

  useEffect(() => {
    setRandomValue(Math.floor(Math.random() * 10));
  }, [setRandomValue]}


  return randomValue;
}

---