From 6c16d9294c7091ff473a8cba8f219e5e093347cd Mon Sep 17 00:00:00 2001
From: moti <moti.kor@gmail.com>
Date: Mon, 24 Feb 2020 18:03:51 +0100
Subject: [PATCH 1/2] add example for why-did-you-render

---
 examples/with-why-did-you-render/README.md    | 45 +++++++++++++++++++
 .../components/header.js                      | 19 ++++++++
 .../with-why-did-you-render/next.config.js    | 18 ++++++++
 examples/with-why-did-you-render/package.json | 15 +++++++
 .../with-why-did-you-render/pages/index.js    |  7 +++
 .../whyDidYouRender.js                        |  4 ++
 6 files changed, 108 insertions(+)
 create mode 100644 examples/with-why-did-you-render/README.md
 create mode 100644 examples/with-why-did-you-render/components/header.js
 create mode 100644 examples/with-why-did-you-render/next.config.js
 create mode 100644 examples/with-why-did-you-render/package.json
 create mode 100644 examples/with-why-did-you-render/pages/index.js
 create mode 100644 examples/with-why-did-you-render/whyDidYouRender.js

diff --git a/examples/with-why-did-you-render/README.md b/examples/with-why-did-you-render/README.md
new file mode 100644
index 000000000000000..498fa22e1ee1b74
--- /dev/null
+++ b/examples/with-why-did-you-render/README.md
@@ -0,0 +1,45 @@
+# 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.
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-why-did-you-render)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+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
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-why-did-you-render
+cd with-why-did-you-render
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [ZEIT Now](https://zeit.co/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/zeit/next.js/tree/master/examples/with-why-did-you-render)
diff --git a/examples/with-why-did-you-render/components/header.js b/examples/with-why-did-you-render/components/header.js
new file mode 100644
index 000000000000000..b339389ea50320b
--- /dev/null
+++ b/examples/with-why-did-you-render/components/header.js
@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react'
+
+const Header = () => {
+  const [objState, setObjState] = useState({ name: 'World' })
+
+  useEffect(() => {
+    setObjState({ name: 'World' })
+  }, [])
+
+  return (
+    <header>
+      <h1>Hello {objState.name} !</h1>
+    </header>
+  )
+}
+
+Header.whyDidYouRender = true
+
+export default Header
diff --git a/examples/with-why-did-you-render/next.config.js b/examples/with-why-did-you-render/next.config.js
new file mode 100644
index 000000000000000..a2049aa5a66f139
--- /dev/null
+++ b/examples/with-why-did-you-render/next.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+  webpack(config, { dev, isServer, defaultLoaders }) {
+    const originalEntry = config.entry
+    config.entry = async () => {
+      const entries = await originalEntry()
+      if (dev && !isServer) {
+        if (
+          entries['main.js'] &&
+          !entries['main.js'].includes('./whyDidYouRender.js')
+        ) {
+          entries['main.js'].unshift('./whyDidYouRender.js')
+        }
+      }
+      return entries
+    }
+    return config
+  },
+}
diff --git a/examples/with-why-did-you-render/package.json b/examples/with-why-did-you-render/package.json
new file mode 100644
index 000000000000000..f67663f7dc9c05a
--- /dev/null
+++ b/examples/with-why-did-you-render/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "why-did-you-render",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@welldone-software/why-did-you-render": "^4.0.4",
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "license": "ISC"
+}
diff --git a/examples/with-why-did-you-render/pages/index.js b/examples/with-why-did-you-render/pages/index.js
new file mode 100644
index 000000000000000..b834eeca67d14a2
--- /dev/null
+++ b/examples/with-why-did-you-render/pages/index.js
@@ -0,0 +1,7 @@
+import Header from '../components/header.js'
+
+export default () => (
+  <div>
+    <Header />
+  </div>
+)
diff --git a/examples/with-why-did-you-render/whyDidYouRender.js b/examples/with-why-did-you-render/whyDidYouRender.js
new file mode 100644
index 000000000000000..28bd323792a11d6
--- /dev/null
+++ b/examples/with-why-did-you-render/whyDidYouRender.js
@@ -0,0 +1,4 @@
+import whyDidYouRender from '@welldone-software/why-did-you-render'
+import React from 'react'
+
+whyDidYouRender(React)

From 5041fcff4bb829e1230273508f0ff3e90d2f9177 Mon Sep 17 00:00:00 2001
From: moti <moti.kor@gmail.com>
Date: Fri, 28 Feb 2020 13:05:33 +0100
Subject: [PATCH 2/2] Load whyDidYouRender from _app.js

To avoid custom webpack main entry modifications
as this can cause [hydration errors](https://github.com/zeit/next.js/pull/10662#pullrequestreview-365188433)
---
 .../with-why-did-you-render/next.config.js     | 18 ------------------
 examples/with-why-did-you-render/pages/_app.js |  8 ++++++++
 .../with-why-did-you-render/whyDidYouRender.js |  4 ----
 3 files changed, 8 insertions(+), 22 deletions(-)
 delete mode 100644 examples/with-why-did-you-render/next.config.js
 create mode 100644 examples/with-why-did-you-render/pages/_app.js
 delete mode 100644 examples/with-why-did-you-render/whyDidYouRender.js

diff --git a/examples/with-why-did-you-render/next.config.js b/examples/with-why-did-you-render/next.config.js
deleted file mode 100644
index a2049aa5a66f139..000000000000000
--- a/examples/with-why-did-you-render/next.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
-  webpack(config, { dev, isServer, defaultLoaders }) {
-    const originalEntry = config.entry
-    config.entry = async () => {
-      const entries = await originalEntry()
-      if (dev && !isServer) {
-        if (
-          entries['main.js'] &&
-          !entries['main.js'].includes('./whyDidYouRender.js')
-        ) {
-          entries['main.js'].unshift('./whyDidYouRender.js')
-        }
-      }
-      return entries
-    }
-    return config
-  },
-}
diff --git a/examples/with-why-did-you-render/pages/_app.js b/examples/with-why-did-you-render/pages/_app.js
new file mode 100644
index 000000000000000..d6ee4f31390807f
--- /dev/null
+++ b/examples/with-why-did-you-render/pages/_app.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import whyDidYouRender from '@welldone-software/why-did-you-render'
+
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  whyDidYouRender(React)
+}
+
+export default ({ Component, pageProps }) => <Component {...pageProps} />
diff --git a/examples/with-why-did-you-render/whyDidYouRender.js b/examples/with-why-did-you-render/whyDidYouRender.js
deleted file mode 100644
index 28bd323792a11d6..000000000000000
--- a/examples/with-why-did-you-render/whyDidYouRender.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import whyDidYouRender from '@welldone-software/why-did-you-render'
-import React from 'react'
-
-whyDidYouRender(React)