Why Did You Render

설치

yarn add @welldone-software/why-did-you-render

.babelrc.js

'@babel/preset-react', {
  runtime: 'automatic',
  development: process.env.NODE_ENV === 'development',
  importSource: '@welldone-software/why-did-you-render',
}

프로젝트에서 가장 먼저 import 해야 함. react-hot-loader 보다 더 먼저!!!
wdyr.ts 파일에 아래 코드를 추가하고 프로젝트 엔트리 파일(App.tsx 또는 index.tsx) 에서 import './wdyr.ts';

Error: await import 사용하면 에러가 발생함.

import React from 'react';

export const setWhyDidYouRender = async (): Promise<void> => {
  if (process.env.NODE_ENV === 'development') {
    const { default: whyDidYouRender } = await import(
      '@welldone-software/why-did-you-render'
    );

    whyDidYouRender(React, {
      include: [/.*/],
    });
  }
};

setWhyDidYouRender();

Solved

if (process.env.NODE_ENV === 'development') {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    include: [/.*/],
  });
}

index.tsx

/// <reference types="@welldone-software/why-did-you-render" />

// Only for development mode
import './wdyr';

import React from 'react';
import ReactDOM from 'react-dom';

formState 객체의 isDirty 값을 읽어 오면 re-rendering 메시지 안 뜸.

const {
    register,
    handleSubmit,
    errors,
    // Read the formState before render to subscribe the form state through Proxy
    formState: { isDirty, isSubmitting, touched, submitCount },
  } = useForm<FormInputs>();