rsnext/examples/with-why-did-you-render/README.md

Why did you render

This is a simple example of how to use why-did-you-render.

The header component will rerender despite the state staying the same.

You can see why-did-you-render console logs about this redundant re-render in the developer console.

Installation guide

1. add why-did-you-render to the project by running:

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

2. Create scripts/wdyr.js with the code:

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

3. Import scripts/wdyr.js as the first import of _app.

4. Make sure that react-preset uses @welldone-software/why-did-you-render to import the monkey patched React with WDYR, by modifying next/babel in babel.config.js:

// babel.config.js
module.exports = function (api) {
  const isServer = api.caller((caller) => caller?.isServer)
  const isCallerDevelopment = api.caller((caller) => caller?.isDev)

  const presets = [
    [
      'next/babel',
      {
        'preset-react': {
          importSource:
            !isServer && isCallerDevelopment
              ? '@welldone-software/why-did-you-render'
              : 'react',
        },
      },
    ],
  ]

  return { presets }
}

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-why-did-you-render with-why-did-you-render-app
# or
yarn create next-app --example with-why-did-you-render with-why-did-you-render-app
# or
pnpm create next-app --example with-why-did-you-render with-why-did-you-render-app

Deploy it to the cloud with Vercel (Documentation).