React Hooks must be called in a React function componentの原因と解消方法

下記のようなコードがあったときにエラーが起きます。

  Line 7:29:  React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  useEffect(() => {
    const [hoge, setHoge] = useState<string>('')
    setHoge('foobar')
  }, [])

  return (
    <div className="App">
        <p>
          {hoge} 
        </p>
    </div>
  );
}
export default App;

これは、useEffectの中でuseStateなどが呼べないので、発生するエラーです。 解消方法としては、下記のようにuseEffectの外に出してあげれば良いのです。 そうしたら、無事エラーも出ずに解決できます。

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [hoge, setHoge] = useState<string>('')
  useEffect(() => {
    setHoge('foobar')
  }, [])

  return (
    <div className="App">
        <p>
          {hoge} 
        </p>
    </div>
  );
}
export default App;