TypeScriptでReact Hooksを型安全に使う方法：useEffectとuseRefの徹底解説

useEffect(() => {
  // 副作用の処理
  return () => {
    // クリーンアップ処理
  };
}, [依存配列]);

import { useEffect, useState } from "react";

const MyComponent: React.FC = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://api.example.com/data");
      const result: string = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // 依存配列は空（初回マウント時のみ実行）

  return <div>{data}</div>;
};

useEffect(() => {
  console.log("副作用の実行");
}, [依存する値]);

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

useEffect(() => {
  console.log(`Count is: ${count}`);
}, [count]); // countはnumber型

const logMessage = (message: string): void => {
  console.log(message);
};

useEffect(() => {
  logMessage("Hello, World!");
}, [logMessage]); // logMessageは(message: string) => void型

Type 'string' is not assignable to type 'number'.

import React, { useState, useEffect, useCallback } from "react";

const OptimizedComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const logCount = useCallback(() => {
    console.log(`Count is: ${count}`);
  }, [count]); // countを依存配列に追加

  useEffect(() => {
    logCount();
  }, [logCount]); // logCountを依存配列に追加

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
      Increment
    </button>
  );
};

import React, { useRef } from "react";

const ButtonComponent: React.FC = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);

  const handleClick = () => {
    if (buttonRef.current) {
      buttonRef.current.style.backgroundColor = "blue";
    }
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Change Color
    </button>
  );
};

import React, { useRef, useState } from "react";

const CounterComponent: React.FC = () => {
  const renderCount = useRef<number>(0);
  const [count, setCount] = useState<number>(0);

  renderCount.current += 1;

  return (
    <div>
      <p>Button clicked: {count} times</p>
      <p>Component rendered: {renderCount.current} times</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
};

   const ref = useRef<HTMLInputElement>(null);

const ref = useRef<HTMLDivElement | null>(null);

import React, { useRef } from "react";

const ClickButtonComponent: React.FC = () => {
  const buttonRef = useRef<HTMLButtonElement | null>(null);

  const handleClick = () => {
    if (buttonRef.current) {
      buttonRef.current.style.backgroundColor = "green";
    }
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Click Me
    </button>
  );
};

import React, { useRef } from "react";

const FocusInputComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);

  const handleFocus = () => {
    inputRef.current?.focus(); // オプショナルチェーンでnullチェック
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Enter text here" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

const inputRef = useRef<HTMLInputElement | null>(null);

const handleFocus = () => {
  inputRef.current!.focus(); // 非nullアサーションで型エラーを回避
};

   const ref = useRef(null); // 型がanyになり、補完が効かなくなる

   ref.current.style.display = "block"; // TypeScriptでエラー、実行時にクラッシュ

import React, { useState, useEffect, useRef } from "react";

const AutoScrollInput: React.FC = () => {
  const [text, setText] = useState<string>(""); // 入力値の状態管理
  const inputRef = useRef<HTMLTextAreaElement | null>(null); // 入力フィールドの参照
  const containerRef = useRef<HTMLDivElement | null>(null); // コンテナの参照

  // 入力フィールドにフォーカスする関数
  const handleFocus = () => {
    inputRef.current?.focus();
  };

  // 自動スクロールを管理する副作用
  useEffect(() => {
    if (containerRef.current) {
      const { scrollHeight, clientHeight } = containerRef.current;
      if (scrollHeight > clientHeight) {
        containerRef.current.scrollTop = scrollHeight - clientHeight;
      }
    }
  }, [text]); // テキストが更新されるたびに発火

  return (
    <div
      ref={containerRef}
      style={{
        height: "150px",
        overflowY: "auto",
        border: "1px solid #ccc",
        padding: "10px",
      }}
    >
      <textarea
        ref={inputRef}
        value={text}
        onChange={(e) => setText(e.target.value)}
        style={{
          width: "100%",
          height: "100px",
        }}
      />
      <button onClick={handleFocus} style={{ marginTop: "10px" }}>
        Focus Input
      </button>
    </div>
  );
};

export default AutoScrollInput;

React Hook useEffect has a missing dependency: 'someVar'. Either include it or remove the dependency array.  

import React, { useState, useEffect, useCallback } from "react";

const Example: React.FC = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  useEffect(() => {
    increment();
  }, [increment]); // incrementを依存配列に追加

  return <div>Count: {count}</div>;
};

Property 'current' does not exist on type 'MutableRefObject<null>'.

import React, { useRef } from "react";

const Example: React.FC = () => {
  const divRef = useRef<HTMLDivElement | null>(null);

  const handleClick = () => {
    if (divRef.current) {
      divRef.current.style.backgroundColor = "blue";
    }
  };

  return <div ref={divRef} onClick={handleClick}>Click me</div>;
};

Effect callbacks are synchronous to prevent race conditions.

import React, { useEffect } from "react";

const Example: React.FC = () => {
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://api.example.com/data");
      const data = await response.json();
      console.log(data);
    };

    fetchData();
  }, []);

  return <div>Fetching data...</div>;
};

Type 'string' is not assignable to type 'number'.

import React, { useState } from "react";

const Example: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const increment = () => {
    setCount(count + 1); // number型で正しい操作
  };

  return <button onClick={increment}>Count: {count}</button>;
};

Potential infinite loop detected.

import React, { useState, useEffect, useCallback } from "react";

const Example: React.FC = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  useEffect(() => {
    increment();
  }, [increment]); // 無限ループを防ぐ

  return <div>Count: {count}</div>;
};

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type FormValues = {
  username: string;
  email: string;
  password: string;
};

const RegistrationForm: React.FC = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();

  const onSubmit: SubmitHandler<FormValues> = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", { required: "Username is required" })} placeholder="Username" />
      {errors.username && <p>{errors.username.message}</p>}

      <input {...register("email", { required: "Email is required" })} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register("password", { required: "Password is required" })} type="password" placeholder="Password" />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit">Register</button>
    </form>
  );
};

export default RegistrationForm;

import React from "react";
import { BrowserRouter as Router, Route, useParams } from "react-router-dom";

type Params = {
  id: string;
};

const UserDetails: React.FC = () => {
  const { id } = useParams<Params>();

  return <div>User ID: {id}</div>;
};

const App: React.FC = () => (
  <Router>
    <Route path="/user/:id" component={UserDetails} />
  </Router>
);

export default App;

import React, { useEffect, useState } from "react";
import axios from "axios";

type User = {
  id: number;
  name: string;
  email: string;
};

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await axios.get<User[]>("https://jsonplaceholder.typicode.com/users");
      setUsers(response.data);
    };

    fetchUsers();
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
};

export default UserList;

import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";

type CounterState = {
  value: number;
};

const initialState: CounterState = {
  value: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment(state) {
      state.value += 1;
    },
    decrement(state) {
      state.value -= 1;
    },
    setValue(state, action: PayloadAction<number>) {
      state.value = action.payload;
    },
  },
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const { increment, decrement, setValue } = counterSlice.actions;
export default store;