はじめに
プログラミング学習中の@kat_logと申します。
ReactのuseStateとuseRefの違いをAIに関西弁で教えてもらうとすんなり入ってきたので共有です😂
プロンプト
UseStateとuseRefの違いは再レンダーするのがステート、しないのがレフですかね?関西弁で教えてくれ!
(Gemini 2.5 Flash experimentalさんへ)
回答
せやせや!その通りやで!
useState はな、値がポコっと変わったら、「あ、値変わったんやな!」てReactが気ぃ利かせて画面もシュッと変え直してくれる(再レンダーしてくれる) ときに使うもんや。例えば、ボタンを押したら数字が増えて、その増えた数字を画面に出したいとか、そういう場合やな。
ほんで、useRef はな、値は覚えときたいねんけど、その値が変わったからって別に画面までごそごそ変えんでもええねん 、っていうときに使うもんや。値は持っとくけど、それが変わっても再レンダーはせえへん。
例えば、
- タイマーのIDとか(画面には出さへんけど、タイマーを止めるときにいるやろ?)
- 直前の値とか(今の値と一個前の値を比べたいけど、一個前の値が変わっても画面は変わらんでええやん?)
- 画面上の要素(DOM)を直接触りたいときとか(これも値が変わるって話やないし、画面全体を変え直す必要ないやん?)
こういう、「値は持っときたいけど、その値が理由で画面を再レンダーしたくない」っちゅうときに useRef が便利なんや。
せやから、「再レンダーするのがステート、せんのがレフ」っていう理解でバッチリやで!分かりやすい違いやろ?
終わり
以上です!😂