Library doesn't seem to work with NextJS.

What I did:

1. npm install @welldone-software/why-did-you-render --save --dev

2. Added the following to _app.js:

if (process.env.NODE_ENV === 'development') {
  if (typeof window !== 'undefined') {
    const whyDidYouRender = require('@welldone-software/why-did-you-render');
    whyDidYouRender(React, {
      trackAllPureComponents: true,
    });
  }
}

My component:

import React from 'react'

import { Container, Row, Col } from 'react-bootstrap'

const Header = () => {

  const [counter, setCounter] = React.useState(0)

  return (
    <Row className='my-3 py-5' style={{ backgroundColor: 'pink' }}>
      <Col align='center'>
        <div onClick={() => setCounter(counter + 1)}>THIS IS THE HEADER {counter}</div>
      </Col>
    </Row>
  )

}

Header.whyDidYouRender = true

export default Header

Clicking updates the counter, however the library doesn’t log anything.

I do see a few logs for another component though (slider from react-slick)

[vzaidman]

I also improved the example on next.js: https://github.com/vercel/next.js/tree/canary/examples/with-why-did-you-render

[vzaidman]

I suggest moving it to another file. It might work now, but it doesn’t cover some cases which might break it.