【React】【TypeScript】void演算子を使って返り値を持つ関数をuseEffectの処理本体にしても型エラーにしない

 ReactのuseEffectは任意のライフサイクルで発火する副作用を管理するためのフックです。ちょっと便利すぎるくらいですがレンダリングの回数が増えるのでなるべく使わないことが勧められるくらいです。useEffectは次の用に関数を渡して処理を定義します。

useEffect(()=> {
  // メインの処理
  return () => {
    // クリーンアップの処理
  }
}, [/* 処理が発火する条件 */]);

 クリーンアップの処理は未定義でもOKです。そして既に独立した関数としてある関数をuseEffectのタイミングで使いたい時は次の様に書きたくなります。

const printMsg = (msg: string):striing => {
    console.log(msg);
    return msg;
}

useEffect(() => printMsg('初期表示'), []);

 しかしながらこのアロー関数でワンライナーにする書き方は返り値がundefinedである関数以外、TypeScriptでエラーになります。JavaScript的にも実行してもクリーンアップ関数があるべき部分にそうでない値があるのは望ましい状況ではありません。Reactの定めた型から外れる以上、Reactが期待する挙動と異なることをしてもおかしくないです。書きやすさ読みやすさを維持しつつ問題ない型にするために次の手段を取れます。

const printMsg = (msg: string):string => {
    console.log(msg);
    return msg;
}

useEffect(() => void printMsg('初期表示'), []);

 void 演算子を使って関数の実行結果を undefined にします。void 演算子は評価結果をundefinedにする演算子で、滅多に使うことがない演算子でもあります。恐らく主な使い道はコードゴルフで undefined の代わりに void 0 を使う方法です。
void 演算子 – JavaScript | MDN
 こうすると関数の実行結果、上記例であればprintMsgの返り値である文字列が undefined となり、Reactの想定する値を返せるようになります。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG