92aafcbcf1
<!-- Thanks for opening a PR! Your contribution is much appreciated. In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change that you're making: --> ## Summary - Added jsdoc typing for all examples using `next.config.js` - Added jsdoc typing for all examples using `tailwind.config.js` ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) |
||
|---|---|---|
| .. | ||
| components | ||
| pages | ||
| scripts | ||
| .gitignore | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
Why did you render
This is a simple example of how to use why-did-you-render within a Next.js app.
We are essentially extending webpack config to allow the monkey patched React version of WDYR in development mode and adding to our application
by importing wdyr.js at the top of Next.js _app.js.
By default, all pure components will be tracked, but you can add
Component.whyDidYouRender = true to regular function components in case you need.
In this example, 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.
When using Typescript, call the file wdyr.ts instead and add the following line to the top of the file to import the package's types:
/// <reference types="@welldone-software/why-did-you-render" />
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
yarn create next-app --example with-why-did-you-render with-why-did-you-render-app
pnpm create next-app --example with-why-did-you-render with-why-did-you-render-app
Deploy it to the cloud with Vercel (Documentation).