Library doesn't seem to work with NextJS.

[spyshower]

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]

move

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

to scripts/wdyr.js
and import scripts/wdyr.js as the first import of _app.

i think it should work

[vzaidman]

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

[vzaidman]

you are free to re-open this if you'll need more help!

[spyshower]

@vzaidman Thanks for the help but it still doesn't work (I created a scripts folder, sibling of src and pages ones). Perhaps I shouldn't have used the --dev flag while installing the package..?

Actually I don't see devDependencies in my package.json and I got no idea how these dependencies work anyway.. It's in normal dependencies.

[vzaidman]

it doesn't really matter if it's in dev dependencies or in the regular ones.

i think it's probably working.

it's just that there's no problem with the component you linked. you wouldn't want the library to log on all the renders. the library logs on renders that could have been avoided.

just to test it, try to change the component to:

import React from 'react'

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

const Header = () => {

  const [counter, setCounter] = React.useState({count: 0})

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

}

Header.whyDidYouRender = true

export default Header

[spyshower]

it's just that there's no problem with the component you linked. you wouldn't want the library to log on all the renders. the library logs on renders that could have been avoided.

<div onClick={() => setCounter({count: 0}}>THIS IS THE HEADER {counter.count}</div>

I assume that you wrote {count: 0} intentionally to show what an unnecessary render means?

Also, I don't understand the logic. When the counter (in my example) changes, doesn't a full rerender happen?

[vzaidman]

When the counter (in my example) changes, doesn't a full rerender happen?

Yes, but it's not a redundant one. There's no reason to track re-renders if the props change.

[spyshower]

There's no reason to track re-renders if the props change.

You have a point. Thank you for your help man, wish more creators/maintainers were like you!

[Vadorequest]

For the record, I've got it working with Next.js for quite a while, see:

https://github.com/UnlyEd/next-right-now/blob/30d83e961b6267ee7704d21b70004ee167f95ff5/src/pages/_app.tsx#L19-L36

But I might move it to another file indeed, would be cleaner.

[vzaidman]

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