refactor: upgrade config to remove unnecessary react imports

packages/eslint-config-custom/.eslintrc.js

@@ -26,6 +26,8 @@ module.exports = {
   rules: {
     'prettier/prettier': 'warn',
     'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
     'sort-imports': 'off',
     'import/order': 'off',
     'simple-import-sort/exports': 'warn',

src/useBoolean/useBoolean.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useBoolean } from '..'
 
 export default function Component() {

src/useClickAnyWhere/useClickAnyWhere.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { useClickAnyWhere } from '..'
 

src/useCopyToClipboard/useCopyToClipboard.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useCopyToClipboard } from '..'
 
 export default function Component() {

src/useCountdown/useCountdown.demo.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useState } from 'react'
 
 import { useCountdown } from '..'
 

src/useCounter/useCounter.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useCounter } from '..'
 
 export default function Component() {

src/useDarkMode/useDarkMode.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useDarkMode } from '..'
 
 export default function Component() {

src/useDebounce/useDebounce.demo.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 
 import { useDebounce } from '..'
 

src/useDocumentTitle/useDocumentTitle.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useDocumentTitle } from '..'
 
 export default function Component() {

src/useDocumentTitle/useDocumentTitle.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks/dom'
+import { renderHook } from '@testing-library/react-hooks/dom'
 
 import useDocumentTitle from './useDocumentTitle'
 

src/useEffectOnce/useEffectOnce.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { useEffectOnce } from '..'
 

src/useElementSize/useElementSize.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { useElementSize } from '..'
 

src/useEventListener/useEventListener.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 
 import { useEventListener } from '..'
 

src/useFetch/useFetch.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useFetch } from '..'
 
 const url = `http://jsonplaceholder.typicode.com/posts`

src/useHover/useHover.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 
 import { useHover } from '..'
 

src/useImageOnLoad/useImageOnLoad.demo.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
 
 import { useImageOnLoad } from '..'
 

src/useIntersectionObserver/useIntersectionObserver.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 
 import { useIntersectionObserver } from '..'
 

src/useInterval/useInterval.demo.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useState } from 'react'
 
 import { useInterval } from '..'
 

src/useIsClient/useIsClient.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useIsClient } from '..'
 
 export default function Component() {

src/useIsFirstRender/useIsFirstRender.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { useIsFirstRender } from '..'
 

src/useIsMounted/useIsMounted.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { useIsMounted } from '..'
 

src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useIsomorphicLayoutEffect } from '..'
 
 export default function Component() {

src/useLocalStorage/useLocalStorage.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useLocalStorage } from '..'
 
 // Usage

src/useLockedBody/useLockedBody.demo.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState } from 'react'
+import { CSSProperties, useState } from 'react'
 
 import { useLockedBody } from '..'
 

src/useMap/useMap.demo.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import { MapOrEntries, useMap } from '..'
 

src/useMediaQuery/useMediaQuery.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useMediaQuery } from '..'
 
 export default function Component() {

src/useOnClickOutside/useOnClickOutside.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 
 import { useOnClickOutside } from '..'
 

src/useReadLocalStorage/useReadLocalStorage.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useReadLocalStorage } from '..'
 
 export default function Component() {

src/useScreen/useScreen.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useScreen } from '..'
 
 export default function Component() {

src/useScript/useScript.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { useScript } from '..'
 

src/useSessionStorage/useSessionStorage.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useSessionStorage } from '..'
 
 export default function Component() {

src/useSsr/useSsr.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useSsr } from '..'
 
 export default function Component() {

src/useStep/useStep.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStep } from '..'
 
 export default function Component() {

src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useTernaryDarkMode } from '..'
 
 export default function Component() {

src/useTimeout/useTimeout.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { useTimeout } from '..'
 

src/useUpdateEffect/useUpdateEffect.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { useUpdateEffect } from '..'
 

src/useWindowSize/useWindowSize.demo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useWindowSize } from '..'
 
 export default function Component() {

templates/codesandbox/tsconfig.json

@@ -4,7 +4,7 @@
     "module": "commonjs",
     "strict": true,
     "lib": ["ESNEXT", "DOM"],
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "isolatedModules": true
   }

tsconfig.json

@@ -6,7 +6,7 @@
     "skipLibCheck": true,
     "removeComments": true,
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "strict": true,
     "lib": ["ESNEXT", "DOM"]
   },

website/gatsby-node.ts

@@ -4,5 +4,20 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
+import { GatsbyNode } from 'gatsby'
+
 export { createPages } from './src/gatsby/createPages'
 export { onCreateNode } from './src/gatsby/onCreateNode'
+
+// importing React in now not required since React 17 and Gatsby 2.28.1,
+// but the ecosystem of plugins doesn't support it all yet
+export const onCreateBabelConfig: GatsbyNode['onCreateBabelConfig'] = ({
+  actions,
+}) => {
+  actions.setBabelPlugin({
+    name: '@babel/plugin-transform-react-jsx',
+    options: {
+      runtime: 'automatic',
+    },
+  })
+}

website/src/components/CopyButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import FileCopyIcon from '@mui/icons-material/FileCopy'
 import { IconButton } from '@mui/material'

website/src/components/backToTop.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
 import { styled } from '@mui/material'

website/src/components/code.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled } from '@mui/material'
 import Typography from '@mui/material/Typography'
 import Highlight, { defaultProps, Language } from 'prism-react-renderer'

website/src/components/hero.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import { styled } from '@mui/material'
 import Container from '@mui/material/Container'

website/src/components/layout/footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled } from '@mui/material'
 import Container from '@mui/material/Container'
 import Hidden from '@mui/material/Hidden'

website/src/components/layout/header.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import GitHubIcon from '@mui/icons-material/GitHub'
 import MenuIcon from '@mui/icons-material/Menu'
 import RssFeedIcon from '@mui/icons-material/RssFeed'

website/src/components/layout/layout.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import { styled, useMediaQuery, useTheme } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline'

website/src/components/layout/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
 import { styled } from '@mui/material'

website/src/components/mdxRenderer.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/display-name */
-import React, { Fragment, HTMLProps } from 'react'
+import { Children, Fragment, HTMLProps } from 'react'
 
 import { MDXProvider } from '@mdx-js/react'
 import MuiDivider from '@mui/material/Divider'
@@ -146,7 +145,7 @@ const childrenToString = (
 ): string => {
   let label = ''
 
-  React.Children.map(children, child => {
+  Children.map(children, child => {
     if (typeof child === 'string') {
       label += child
     }

website/src/components/search/SearchModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'

website/src/components/search/hitComps.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType } from 'react'
+import { ComponentType } from 'react'
 
 import { Divider } from '@mui/material'
 import Link from '@mui/material/Link'

website/src/components/search/input.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import SearchIcon from '@mui/icons-material/Search'
 import MuiInputBase, { InputBaseProps } from '@mui/material/InputBase'

website/src/components/seo.tsx

@@ -5,7 +5,7 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import { useLocation } from '@reach/router'
 

website/src/libs/filterHooks.ts

@@ -1,4 +1,5 @@
 import { HookNode } from '../models'
+
 export interface ExtendedPost<T extends HookNode = HookNode> {
   post: T
   hookId: string
@@ -12,17 +13,15 @@ export function filterHook<T extends HookNode = HookNode>(
   demos: HookNode[],
 ): ExtendedPost<T>[] {
   const matchesPosts: ExtendedPost<T>[] = []
-  posts.forEach(post => {
-    const { fields } = post
 
-    // Check if have the corresponding hook
-    const hook = hooks.find(({ fields: { name } }) => name === fields.name)
-
-    // Check if have the corresponding hook demo
-    const demo = demos.find(({ fields: { name } }) => name === fields.name)
+  posts.forEach(post => {
+    // Check if have the corresponding hook and demo
+    const hook = hooks.find(({ fields }) => fields.name === post.fields.name)
+    const demo = demos.find(({ fields }) => fields.name === post.fields.name)
 
     if (hook && demo) {
-      matchesPosts.push({ post, hookId: hook.id, demoId: demo.id })
+      const extendedPost = { post, hookId: hook.id, demoId: demo.id }
+      matchesPosts.push(extendedPost)
     }
   })
 

website/src/libs/wrapPageElement.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import TopLayout from '~/components/layout/layout'
 
-const wrapPageElement = ({ element }: { element: ReactNode }) => {
-  return <TopLayout>{element}</TopLayout>
-}
+const wrapPageElement = ({ element }: { element: ReactNode }) => (
+  <TopLayout>{element}</TopLayout>
+)
 
 export default wrapPageElement