React useStateを使う意味が知りたい

Question

聞きたい概要

React についての質問です.
useState に関してです.

現状の理解

useState は関数型component内で, stateを保持するために使用する.

また useEffect はクラス型componentで言えば, componentDidMountのようなものだと理解しています.

質問

• component 内で useState を使う意味について知りたいです.

例を下に書きます

• useStateを使った時

const Example = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(count)
  })
  return (
    <button onClick={()=>setCount(count +1)} >
      click
    </ button>
}

• useStateを使わなかった時

const Example = () => {
  let count = 0

  const countPlus = () => {
    count++
    console.log(count)
  }
  return (
    <button onClick={()=>countPlus()} >
      click
    </ button>
}

上の例では両方とも, click ボタンを押せば同じ動作をします.

仮にこれが <input>要素などだったとしても,両方とも同じ値を入力すれば, 両方とも同じ動きをすると思います.

以上より何故 useStateを使用するのかその理由が知りたいです.

また, 関数内で let を用いて変数を定義し値を受け取ったりすることが, 推奨されない理由があれば,それも教えていただけると嬉しいです.

Answer 1

上の例では両方とも, click ボタンを押せば同じ動作をします.

しません。stateを使わない場合、countはコンポーネントのレンダーのたびにリセットされてしまいます。

Comments

[maisumakun]

（この場合は、たまたま「コンポーネントが再renderされない」書き方になっていますので動いているように見えるだけで、countをrenderさせようとすると破綻します。）

https://jsfiddle.net/bmnxu193/

[abcdmmefg]

よくわかりました!
ありがとうございます！！