みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

React で特定条件で useState を使っているコンポーネントが2回描画される

React.js にて、再描画される必要が無いコンポーネントが、なぜか再描画されている事があった。
調べてみると、 React.StrictModeuseState を使っている場合、再描画しているらしい。

github.com

つまり、こういうふうにやってると、描画される必要が無くても2回描画される。

// root
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
, document.querySelector("#app"));
// component
import React, { useState } from "react";

const Component : React.FC = () => {
  const [state, setState] = useState("");
  console.log("Hello?"); // 2回コンソールに出力される

  return (
    <>
      <p> { state }</p>
    </>
  );
}

知らなくて「なんで2回描画されてるん...?」ってなってしまったのでメモ。 ではでは~。