History

Steven 9f9214abe5 Updated create-next-app docs to include pnpm usage (#35755 ) This PR updates the docs and examples for `create-next-app` to include pnpm usage. The following script was used to update every example README: ```js const fs = require('fs') const examples = fs.readdirSync('./examples') for (let example of examples) { const filename = `./examples/${example}/README.md` const markdown = fs.readFileSync(filename, 'utf8') const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm') const output = markdown.replace(regex, (yarn, group) => { const pnpm = `pnpm create next-app -- --example ${group}` return `${yarn}\n# or\n${pnpm}` }) fs.writeFileSync(filename, output) } ```		2022-03-30 21:03:21 +00:00
..
components	chore: Remove some redundant imports (#13066 )	2020-05-20 05:23:16 +00:00
pages	Improve the "why did you render" library example and readme (#20712 )	2021-01-03 16:21:33 +00:00
scripts	Improve the "why did you render" library example and readme (#20712 )	2021-01-03 16:21:33 +00:00
.gitignore	Added .gitignore to examples that are deployed to vercel (#15127 )	2020-07-16 10:52:23 -04:00
babel.config.js	improved the example on how to use WDYR with the latest next.js (#21651 )	2021-02-19 16:41:56 +00:00
package.json	Clean up examples `package.json` (#27121 )	2021-07-12 19:58:03 +00:00
README.md	Updated create-next-app docs to include pnpm usage (#35755 )	2022-03-30 21:03:21 +00:00

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

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

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

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,
    })
  }
}

Import scripts/wdyr.js as the first import of _app.
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 or Yarn 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).