Fixing Redundant React imports on next.js/examples (#13384)

Per #12964

* with-ant-design
* with-dynamic-import
* with-iron-session
* with-monaco-editor
* with-next-page-transitions
* with-react-with-styles
* with-style-sheet
* with-why-did-you-render

Tested each example, working as intended, no additional issues presented

examples/with-ant-design/pages/_app.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import 'antd/dist/antd.css'
 import '../styles/vars.css'
 import '../styles/global.css'

examples/with-dynamic-import/pages/index.js

@@ -1,22 +1,17 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Header from '../components/Header'
 import dynamic from 'next/dynamic'
 
 const DynamicComponent1 = dynamic(() => import('../components/hello1'))
 
 const DynamicComponent2WithCustomLoading = dynamic(
   () => import('../components/hello2'),
-  {
-    loading: () => <p>Loading caused by client page transition ...</p>,
-  }
+  { loading: () => <p>Loading caused by client page transition ...</p> }
 )
 
 const DynamicComponent3WithNoSSR = dynamic(
   () => import('../components/hello3'),
-  {
-    loading: () => <p>Loading ...</p>,
-    ssr: false,
-  }
+  { loading: () => <p>Loading ...</p>, ssr: false }
 )
 
 const DynamicComponent4 = dynamic(() => import('../components/hello4'))
@@ -25,6 +20,7 @@ const DynamicComponent5 = dynamic(() => import('../components/hello5'))
 
 const IndexPage = () => {
   const [showMore, setShowMore] = useState(false)
+  const [falsyField] = useState(false)
 
   return (
     <div>
@@ -40,7 +36,7 @@ const IndexPage = () => {
       <DynamicComponent3WithNoSSR />
 
       {/* This component will never be loaded */}
-      {React.noSuchField && <DynamicComponent4 />}
+      {falsyField && <DynamicComponent4 />}
 
       {/* Load on demand */}
       {showMore && <DynamicComponent5 />}

examples/with-iron-session/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Layout from '../components/Layout'
 
 const Home = () => (

examples/with-iron-session/pages/login.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useState } from 'react'
 import useUser from '../lib/useUser'
 import Layout from '../components/Layout'

examples/with-iron-session/pages/profile-sg.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import useUser from '../lib/useUser'
 import Layout from '../components/Layout'
 

examples/with-iron-session/pages/profile-ssr.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Layout from '../components/Layout'
 import withSession from '../lib/session'
 import PropTypes from 'prop-types'

examples/with-monaco-editor/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import dynamic from 'next/dynamic'
 
 import sample from '../code-sample'

examples/with-next-page-transitions/pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { PageTransition } from 'next-page-transitions'
 
 import Loader from '../components/Loader'

examples/with-next-page-transitions/pages/_document.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {

examples/with-next-page-transitions/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 const Index = () => (

examples/with-react-with-styles/pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { DIRECTIONS } from 'react-with-direction'
 import AphroditeInterface from 'react-with-styles-interface-aphrodite'
 import WithStylesContext from 'react-with-styles/lib/WithStylesContext'

examples/with-react-with-styles/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { css, withStyles } from 'react-with-styles'
 
 function Home({ styles }) {

examples/with-style-sheet/pages/index.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import { useState, useEffect } from 'react'
 import { StyleSheet, StyleResolver } from 'style-sheet'
 const cls = StyleResolver.resolve
 
 export default function Home() {
-  const [color, setColor] = React.useState('#111')
-  React.useEffect(() => {
+  const [color, setColor] = useState('#111')
+  useEffect(() => {
     setTimeout(() => {
       setColor('#00f')
     }, 2000)