useStateについて

データの初期値を設定する状態を管理するためのフック。
useStateにはオブジェクトなどのデータ形式にかかわらず初期値を渡すことができる
これはとても便利。

const [状態名(ex. count), 更新関数名(ex. setCount)] = useState(初期値(ex. 0))

状態を宣言するのと同時に、その状態を更新するための関数を与えてくれるフック。
const [value, setValue] = useState('');

注意点としてフック関数はReactの関数のトップレベルで宣言しなければならない

トップレベルとは、if 文やループ文を含まない関数直下の領域になるので、フックをループや条件分岐内、あるいはネストされた関数内で呼び出してはいけない。
つまり、以下の様に関数内で分岐などを使わずに買いてね、ということ

function App() {
  const [fields, setFields] = useState(initialValues)
  const [position, setPosition] = useState()
  return(
		<p>tesuto</p>
  )

useEffectについて

useEffectのコールバックは基本的に初回のレンダリング時および毎回のレンダリング時に実行されるようになっています。
つまり繰り返されるアクションなどで実行されるので、ステートの差分による処理やタイマーのセットが出来る。第二引数で渡されたステートを監視しながら、ステートが変更されていたらコールバックを実行するというフック
これも便利。
useEffectは複数回記述することも可能。

以下の場合、stateAの値を監視していて、stateAが変更されていたらコールバックを実行する。
そのため、stateAが変更されるまでは実行されないので無駄な処理が省かれる！

useEffect((レンダリング後に実行される関数（コールバック）, 依存変数の配列) => {
},[stateA]);

また、第二引数にステートを渡さず空配列を渡すと、初回レンダリングの後に一度だけ実行されるようになる。

注意点はuseStateと同じでフック関数はReactの関数のトップレベルで宣言しなければならないため、以下↓のような使い方になる。

function App() {
  const [fields, setFields] = useState(initialValues)
  const [position, setPosition] = useState()

  useEffect(() => {
    setPosition(initialPosition)
  }, [])

↑上記はpositionが初回レンダリング時だけinitialPositionで初期化されている。