Gatsby integration about why-did-you-render HOT 27 CLOSED

Your comments are very valuable. I'll try to find a way to make it more intuitive in the future.

from why-did-you-render.

this is why in next.js for example I used to do the following to make sure whyDidYouRender runs first. (simplified) (also it's not needed anymore on newest versions):

@vzaidman how do you use it on new versions?

from why-did-you-render.

Gatsby's browser API onClientEntry is perfect for this.

// gatsby-browser.js
import React from 'react'

export const onClientEntry = () => {
  if (process.env.NODE_ENV !== 'production') {
    const whyDidYouRender = require('@welldone-software/why-did-you-render')
    whyDidYouRender(React)
  }
}

I would be open to making a plugin for this too.

from why-did-you-render.

whyDidYouRender tracks re-renders that are caused by unexpected reasons.
if a prop changes, you do expect a re-render.
try adding the prop p={[]} for example to a component set to track unexpected changes.
it would cause the component re-render even if it's pure because [] !== [].

from why-did-you-render.

You can use logOnDifferentValues option to enable additional logging, even when re-render is expected.

TestComponent.whyDidYouRender = {
  logOnDifferentValues: true
}

from why-did-you-render.

Thank you!

from why-did-you-render.

I’m also interested to integrate this library

from why-did-you-render.

@JustFly1984 do you want to work on this together? I tried contacting the Gatsby team to get some guidance but no one answered

from why-did-you-render.

I don't have experience with getsby but i'd be happy to answer your questions in this tread

from why-did-you-render.

@vzaidman I was writing my questing to you and then I realised I had the wrong thought all along. Just to clarify, where should your library be initiated?

In the README it just says to:

import React from 'react';

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

But it doesn't say anything. Until now, I always did it as the first thing in App.js

EDIT: But it doesn't say anything else. Until now, I always did it as the first thing in App.js.
Can it be initiated somewhere else?

from why-did-you-render.

it is. and later you add it on components to make sure they don't receive redundant re-rendereds

App.whyDidYouRender = true

from why-did-you-render.

@vzaidman I edited my last comment

from why-did-you-render.

it's best to initiate it before anything happens regarding React.
Usually in index.js

from why-did-you-render.

what exactly is the problem?
I suspect gatsby executes code before you get to App. this is why in next.js for example I used to do the following to make sure whyDidYouRender runs first. (simplified) (also it's not needed anymore on newest versions):

    if (dev && !isServer) {
      // simplified code
      webpackConfig.entries['main.js'].unshift('./common/whyDidYouRender.js');
    }

where common/whyDidYouRender.js was:

import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

whyDidYouRender(React);

from why-did-you-render.

@vzaidman
Well, gatsby.js has gatsby-browser.js api where we can execute whyDidYouRender(React) but it has different approach to webpack config, and it is not obvious how to change it, if it needs to be changed at all.

from why-did-you-render.

yes. the webpack is not the point. the point is to make sure no React components are mounted before whyDidYouRender is executed (whyDidYouRender(React);)

from why-did-you-render.

oh, and also, don't let whyDidYouRender(React); run on gatsby server side. it would just slow it. make it only run on dev, on browser.

from why-did-you-render.

Sure. if you open, i'll link to it from the README

from why-did-you-render.

@universse I tried your suggestion with an anonymous functions but it's not working.

from why-did-you-render.

Can you please share your code for gatsby-browser? It seems to be working fine on my end.

from why-did-you-render.

@universse I just copy-pasted your code and then set whyDidYouRender = true on one of the components

from why-did-you-render.

In what way is it not working? Is there any error message? Where did you put the above code?

Here's a screenshot of the console of my Gatsby app.

from why-did-you-render.

@universse I started a new project from scratch. I might be missing something that I don't see.

This is my index.js

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import TestComponent from "../components/TestComponent"

const IndexPage = () => {
  const [text, setText] = React.useState('')
  return (
    <Layout>
      <input type="text" value={text} onChange={({ target: { value } }) => { setText(value) }} />
      <TestComponent text={{ text }} />
      <Link to="/page-2/">Go to page 2</Link>
    </Layout>
  )
}

IndexPage.whyDidYouRender = true

export default IndexPage

And this is my TestComponent.js

import React from 'react'

const TestComponent = ({ text }) => (
  <div>{text && text.text}</div>
)

TestComponent.whyDidYouRender = true
export default TestComponent

from why-did-you-render.

I'm not really sure what you're missing. Things seem to be working properly for me.

Anw here's an example sandbox. https://codesandbox.io/s/gatsby-starter-default-swdwx

The example site is https://swdwx.sse.codesandbox.io/. You can try open the console and type into the input box.

from why-did-you-render.

@universse @vzaidman - I've managed to make it work but it's really confusing and here's why:

1. It doesn't work if you try it on the whole page component like IndexPage.whyDidYouRender = true . I think this was expected but I've missed it.

2. Second of all, if I add text prop value to TestComponent it stops working, no matter where I set whyDidYouRender = true. It works only if TestComponent has no prop set

I'm not sure why this happens. Do you have any idea?

from why-did-you-render.

These plugins might help:

• https://www.gatsbyjs.com/plugins/gatsby-plugin-why-did-you-render/
• https://www.gatsbyjs.com/plugins/gatsby-plugin-why-did-you-render-redux/

from why-did-you-render.

Gatsby's browser API onClientEntry is perfect for this.

// gatsby-browser.js
import React from 'react'

export const onClientEntry = () => {
  if (process.env.NODE_ENV !== 'production') {
    const whyDidYouRender = require('@welldone-software/why-did-you-render')
    whyDidYouRender(React)
  }
}

I would be open to making a plugin for this too.

Yes. And if you want to track on a component basis, you do this on each component:

Component.js
import whyDidYouRender from "@welldone-software/why-did-you-render";

const Component=()=>{
// code here
}
Component.whyDidYouRender = true;

from why-did-you-render.