useStateとは何か？

結論

Reactのフックの一つで、コンポーネントの中で状態をもち、その値を変更できる仕組みを提供してくれている。

状態が変わるとその状態を使っているUI部分が再描画されます。

フックとは何か？

• Reactが提供する特別な関数のこと
• useState, useEffect, useContext などがあります
• 関数コンポーネントに「状態管理」「ライフサイクル処理」などの機能を追加できる
• フック＝関数、でもReactの内部ルールを守った特別な関数

使用例

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>
  {count}
</button>

count が変わると、その値を使っているUIが再レンダーされる！

値が変わっても描画したくない時は…

useRefを使う！

// useRef は値を保持するけど UI は再描画しない
const renderCount = useRef(0);
renderCount.current += 1;

Reactの学習過程で理解したことをまとめました。まだ勉強中なので、もし間違いや不足があれば教えていただけると助かります！