Apps

014-React Hooks｜Step3-1_useRefの使い方：クリック時にアラートでカウントを表示

はじめに

React の useRef は、再レンダリングなしで値を保持できる便利なフックです。

本記事では、useRef を使って クリック回数をカウントし、アラートで表示する方法 を解説します。

通常の useState と useRef の違いや、どのような場合に useRef を使うべきかも詳しく説明します。

「カウントは増えるけど、コンポーネントが再レンダリングされない？」

そんな useRef の特徴を理解し、実際のコードとともに学んでいきましょう！

useRefとは

useRef は、ReactのHooksの1つで、主に以下の用途で使われます。

  1. DOM要素への直接アクセス
  2. 値の保持（再レンダリングの影響を受けない）
  3. 状態の変更を引き起こさずに値を管理

概要

  • useRef を使用してボタンのクリック回数を管理するシンプルなReactコンポーネント
  • MUI（Material-UI）を利用してスタイリング
  • クリック時にアラートでカウントを表示

実装：手順とコードの解説

このコードは、React の useRef を利用して、ボタンがクリックされた回数をカウントし、アラートで表示する シンプルなコンポーネントです。

通常、コンポーネントの状態を保持する場合は useState を使いますが、useRef を使うことで再レンダリングを引き起こさずに値を更新 できます。

1. useRef を使って変数を定義

const ref = useRef(0);
  • useRef(0) は、コンポーネントのライフサイクルを通じて持続する 変数 ref を作成します。
  • ref.current に初期値 0 をセットします。
  • useRef は値が変わってもコンポーネントを再レンダリングしません。

2. ボタンがクリックされたときの処理

const handleClick = () => {
  ref.current = ref.current + 1; // ✅ ref.current の値を増やす
  alert("You clicked:" + ref.current); // ✅ クリック回数をアラートで表示
};
  • ref.current を 1 ずつ増やす
  • クリックされるたびに アラートで ref.current の値を表示

3. UI の構築

return (
  <div>
    <Typography>Welcome to the Toolpad page3!</Typography> 
    <Button variant="outlined" onClick={handleClick}>Click me</Button>
  </div>
);
  • Typography で見出しを表示
  • Button に onClick={handleClick} をセットし、クリック時に handleClick を実行

最終コード

"use client";
import * as React from 'react';
import Typography from '@mui/material/Typography';
import { Button } from '@mui/material';
import { useRef } from 'react';

export default function Page3_1() {

  const ref = useRef(0);
  
  const handleClick = () => {
    ref.current = ref.current + 1;
    alert("You clicked:" + ref.current);
  };

  return (
    <div>
      <Typography>Welcome to the Toolpad page3!</Typography> 
      <Button variant="outlined" onClick={handleClick}>Click me</Button>

    </div>
  );
}

useRef を使うメリット

方法メリットデメリット
useStatesetState を使うと レンダリングが発生クリックのたびに再レンダリングが起きる
useRef (このコード)再レンダリングせずに値を保持変更が UI に直接反映されない

useRef は DOM の参照や、レンダリング不要なデータの保持 に適しています。
このコードでは、クリック回数を保存するだけなので useRef が適している というわけです。

まとめ

手順内容
1useRef を使って ref.current = 0 を定義
2ボタンがクリックされると ref.current を増加
3alert でクリック回数を表示
4useRef を使うことで 再レンダリングせずに値を保持

✅ useRef を使って、コンポーネントの再レンダリングなしに値を保持する例
✅ MUIのコンポーネント（Typography, Button）を使用
✅ クリックのたびにカウントが増えるが、画面には表示されない仕様
✅ 画面にもカウントを表示したいなら useState を使うべき

レンダリングを最小限に抑えたい場合、useRef を活用するのがポイント！ 🚀

-Apps