diff --git a/examples/with-why-did-you-render/README.md b/examples/with-why-did-you-render/README.md index 798c070bfb947..5c980ed93dcac 100644 --- a/examples/with-why-did-you-render/README.md +++ b/examples/with-why-did-you-render/README.md @@ -1,7 +1,35 @@ # Why did you render -This is a simple example of getting [why-did-you-render](https://github.com/welldone-software/why-did-you-render) up and running. -The header component will rerender despite the state staying the same. You can see details in developer console. +This is a simple example of how to use [why-did-you-render](https://github.com/welldone-software/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 + ``` + +1. Create `scripts/wdyr.js` with the code: + + ```jsx + 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, + }) + } + } + ``` + +1. import `scripts/wdyr.js` as the first import of `_app`. ## Deploy your own @@ -20,5 +48,3 @@ yarn create next-app --example with-why-did-you-render with-why-did-you-render-a ``` Deploy it to the cloud with [Vercel](https://vercel.com/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -[![Deploy To Now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/vercel/next.js/tree/master/examples/with-why-did-you-render)