ref(js): Avoid using React.* (#7036)

evanpurkhiser · web-flow · commit deb63a703047 · 2023-05-26T13:24:44.000-07:00
In preperation for react 17 and 18
diff --git a/src/components/apiSidebar.tsx b/src/components/apiSidebar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import {useLocation} from '@reach/router';
 import {graphql, useStaticQuery} from 'gatsby';
 
@@ -47,7 +47,7 @@ export default function ApiSidebar() {
               },
               children,
             }) => (
-              <React.Fragment key={path}>
+              <Fragment key={path}>
                 <SidebarLink to={path} title={title} />
                 {isActive(path) && (
                   <div style={{paddingLeft: '0.5rem'}}>
@@ -65,7 +65,7 @@ export default function ApiSidebar() {
                       )}
                   </div>
                 )}
-              </React.Fragment>
+              </Fragment>
             )
           )}
         </ul>
diff --git a/src/components/basePage.tsx b/src/components/basePage.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {forwardRef, Fragment, useRef} from 'react';
 
 import {getCurrentTransaction} from '../utils';
 
@@ -24,7 +24,7 @@ type WrappedTOCProps = {
   pageContext: PageContext;
 };
 
-const WrappedTOC = React.forwardRef(
+const WrappedTOC = forwardRef(
   (props: WrappedTOCProps, ref: React.RefObject<HTMLDivElement>) => {
     return <TableOfContents {...props} contentRef={ref} />;
   }
@@ -103,10 +103,10 @@ export default function BasePage({
           <div className="col-sm-4 col-md-12 col-lg-4 col-xl-3">
             <div className="page-nav">
               <Banner isModule />
-              <React.Fragment>
+              <Fragment>
                 {prependToc}
                 {hasToc && <WrappedTOC ref={contentRef} pageContext={pageContext} />}
-              </React.Fragment>
+              </Fragment>
             </div>
           </div>
         )}
diff --git a/src/components/codeBlock.tsx b/src/components/codeBlock.tsx
@@ -1,5 +1,5 @@
-import React, {useContext, useRef, useState} from 'react';
-import ReactDOM from 'react-dom';
+import React, {Children, Fragment, useContext, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
 import {ArrowDown, Clipboard} from 'react-feather';
 import {usePopper} from 'react-popper';
 import styled from '@emotion/styled';
@@ -14,7 +14,7 @@ import CodeContext from './codeContext';
 const KEYWORDS_REGEX = /\b___(?:([A-Z_][A-Z0-9_]*)\.)?([A-Z_][A-Z0-9_]*)___\b/g;
 
 function makeKeywordsClickable(children: React.ReactChildren) {
-  const items = React.Children.toArray(children);
+  const items = Children.toArray(children);
 
   KEYWORDS_REGEX.lastIndex = 0;
 
@@ -102,7 +102,7 @@ function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
   const [isAnimating, setIsAnimating] = useState(false);
 
   if (!currentSelection) {
-    return <React.Fragment>keyword</React.Fragment>;
+    return <Fragment>keyword</Fragment>;
   }
 
   const selector = isOpen && (
@@ -135,7 +135,7 @@ function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
   const portal = getPortal();
 
   return (
-    <React.Fragment>
+    <Fragment>
       <KeywordDropdown
         key={index}
         ref={setReferenceEl}
@@ -165,9 +165,8 @@ function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
           </AnimatePresence>
         </span>
       </KeywordDropdown>
-      {portal &&
-        ReactDOM.createPortal(<AnimatePresence>{selector}</AnimatePresence>, portal)}
-    </React.Fragment>
+      {portal && createPortal(<AnimatePresence>{selector}</AnimatePresence>, portal)}
+    </Fragment>
   );
 }
 
diff --git a/src/components/codeContext.tsx b/src/components/codeContext.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import {createContext, useEffect, useState} from 'react';
 
 type ProjectCodeKeywords = {
   API_URL: string;
@@ -68,7 +68,7 @@ type CodeContextType = {
   sharedKeywordSelection: any;
 };
 
-const CodeContext = React.createContext<CodeContextType | null>(null);
+const CodeContext = createContext<CodeContextType | null>(null);
 
 const parseDsn = function (dsn: string): Dsn {
   const match = dsn.match(/^(.*?\/\/)(.*?):(.*?)@(.*?)(\/.*?)$/);
diff --git a/src/components/navbarPlatformDropdown.tsx b/src/components/navbarPlatformDropdown.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import {NavDropdown} from 'react-bootstrap';
 import {PlatformIcon} from 'platformicons';
 
@@ -12,15 +12,15 @@ export default function NavbarPlatformDropdown() {
     <NavDropdown
       title={
         currentPlatform ? (
-          <React.Fragment>
+          <Fragment>
             <PlatformIcon
               platform={currentPlatform.key}
               size={16}
               style={{marginRight: '0.5rem'}}
               format="lg"
             />
             {currentPlatform.title}
-          </React.Fragment>
+          </Fragment>
         ) : (
           'Platforms'
         )
diff --git a/src/components/pageContext.tsx b/src/components/pageContext.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import {createContext} from 'react';
 
 type PageContextType = {
   [key: string]: any;
 };
 
-export const PageContext = React.createContext<null | PageContextType>(null);
+export const PageContext = createContext<null | PageContextType>(null);
 
 export default PageContext;
diff --git a/src/components/platformContent.tsx b/src/components/platformContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment, useState} from 'react';
 import {graphql, useStaticQuery} from 'gatsby';
 
 import usePlatform, {
@@ -71,7 +71,7 @@ export default function PlatformContent({
   const {
     allFile: {nodes: files},
   } = useStaticQuery(includeQuery);
-  const [dropdown, setDropdown] = React.useState(null);
+  const [dropdown, setDropdown] = useState(null);
   const [currentPlatform, setPlatform, isFixed] = usePlatform(platform);
   const hasDropdown = !isFixed;
 
@@ -148,10 +148,10 @@ export default function PlatformContent({
 
       <div className="tab-content">
         <div className="tab-pane show active">
-          <React.Fragment>
+          <Fragment>
             {children || null}
             <Content key={contentMatch.id} file={contentMatch} />
-          </React.Fragment>
+          </Fragment>
         </div>
       </div>
     </section>
diff --git a/src/components/platformSection.tsx b/src/components/platformSection.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 
 import usePlatform, {getPlatformsWithFallback, Platform} from './hooks/usePlatform';
 
@@ -56,5 +56,5 @@ export default function PlatformSection({
     return null;
   }
 
-  return <React.Fragment>{children}</React.Fragment>;
+  return <Fragment>{children}</Fragment>;
 }
diff --git a/src/components/relayMetrics.tsx b/src/components/relayMetrics.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import styled from '@emotion/styled';
 import {graphql, useStaticQuery} from 'gatsby';
 
@@ -44,7 +44,7 @@ function Metric({metric}) {
   const descriptionHtml = metric.childRelayMetricDescription.childMarkdownRemark.html;
 
   return (
-    <React.Fragment>
+    <Fragment>
       <dt>
         <code>
           {metric.name} <MetricType>({metric.type})</MetricType>
@@ -58,7 +58,7 @@ function Metric({metric}) {
           }}
         />
       </dd>
-    </React.Fragment>
+    </Fragment>
   );
 }
 
diff --git a/src/components/search.tsx b/src/components/search.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 import {
   Hit,
   Result,
@@ -195,7 +195,7 @@ function Search({path, autoFocus, platforms = []}: Props): JSX.Element {
               {results
                 .filter(x => x.hits.length > 0)
                 .map((result, i) => (
-                  <React.Fragment key={result.site}>
+                  <Fragment key={result.site}>
                     {showOffsiteResults && (
                       <h4 className="sgs-site-result-heading">From {result.name}</h4>
                     )}
@@ -255,7 +255,7 @@ function Search({path, autoFocus, platforms = []}: Props): JSX.Element {
                         </li>
                       ))}
                     </ul>
-                  </React.Fragment>
+                  </Fragment>
                 ))}
             </div>
           )}
diff --git a/src/components/smartLink.tsx b/src/components/smartLink.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Link} from 'gatsby';
 
 import {marketingUrlParams} from 'sentry-docs/utils';
@@ -29,12 +29,12 @@ export default function SmartLink({
 }: Props): JSX.Element {
   const realTo = to || href || '';
 
-  const [forcedUrl, setForcedUrl] = React.useState(realTo);
+  const [forcedUrl, setForcedUrl] = useState(realTo);
 
   // Google Tag Manager syncs certain query parameters to all links on the page.
   // Since Gatsby's Link is a React component, it doesn't catch these updates
   // because they're made outside of React, so we keep track of them ourselves.
-  React.useEffect(() => {
+  useEffect(() => {
     const marketingParams = marketingUrlParams();
     if (Object.keys(marketingParams).length === 0) {
       return;
diff --git a/src/components/tableOfContents.tsx b/src/components/tableOfContents.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 
 import {captureException} from '../utils';
 
@@ -103,12 +103,12 @@ export default function TableOfContents({contentRef, pageContext}: Props) {
       </div>
       <ul className="section-nav">{recursiveRender(items)}</ul>
       {platform && (
-        <React.Fragment>
+        <Fragment>
           <div className="doc-toc-title">
             <h6>Related Guides</h6>
           </div>
           <GuideGrid platform={platform.name} className="section-nav" />
-        </React.Fragment>
+        </Fragment>
       )}
     </div>
   );
diff --git a/src/templates/apiPage.tsx b/src/templates/apiPage.tsx
@@ -19,7 +19,7 @@ function Params({params}) {
   return (
     <dl className="api-params">
       {params.map(param => (
-        <React.Fragment key={param.name}>
+        <Fragment key={param.name}>
           <dt>
             <div>
               <code data-index>{param.name}</code>
@@ -63,7 +63,7 @@ function Params({params}) {
               <Content file={param} />
             </dd>
           )}
-        </React.Fragment>
+        </Fragment>
       ))}
     </dl>
   );

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React from 'react';`
	`1`	`+import React, {Fragment} from 'react';`
`2`	`2`
`3`	`3`	`import usePlatform, {getPlatformsWithFallback, Platform} from './hooks/usePlatform';`
`4`	`4`
`@@ -56,5 +56,5 @@ export default function PlatformSection({`
`56`	`56`	`return null;`
`57`	`57`	`}`
`58`	`58`
`59`		`- return <React.Fragment>{children}</React.Fragment>;`
	`59`	`+ return <Fragment>{children}</Fragment>;`
`60`	`60`	`}`