なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2019/08/31

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

カテゴリー：

JavaScript

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

React.StrictMode combined with useState causes component to render twice

つまり、こういうふうにやってると、描画される必要が無くても 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 回描画されてるん...？」ってなってしまったのでメモ。ではでは～。