(React) Where Hooks Can't Be Called

·

1 min read

So far, I found these places.

In an useEffect

In the below example, an error occurs.

import { useEffect, useState } from 'react';

export default function () {
  useEffect(() => {
    const [state, setState] = useState<boolean>(true);
    console.log(state);
  }, []);

  return <div></div>;
}

In an Event Handler

In the below example, an error occurs.

import { useState } from 'react';

export default function () {
  function fn() {
    const [state, setState] = useState<boolean>(true);
    console.log(state);
  }

  return <button onClick={fn}>button</button>;
}