Add `console.log` to all `useEffect`

Question

For development purposes I’d like to have the option to log all uses of useEffect inside my React app. Is there an easy way to extend the behaviour of this function? I’m using Webpack, in case this would provide us with an extra way of doing so.

Also, because this will lead to many console.logs, is there a way to tell them apart by providing information identifying the component that’s calling useEffect?

I would like to have this behaviour to “visually” check (in the console) if the application redundantly rerenders.

Answer 1

I would like to have this behaviour to “visually” check (in the console) if the application redundantly rerenders.

There is a library that does this for you: https://github.com/welldone-software/why-did-you-render#readme

The repo has a simple example to set it up:

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}