Use direct imports of react where possible.

TypeScript still requires "import * as React from 'react'" if JSX components are declared.

Author: apepper

src/components/Context.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { createContext } from 'react'
 import type { Action, AnyAction, Store } from 'redux'
 import type { Subscription } from '../utils/Subscription'
 
@@ -12,7 +12,7 @@ export interface ReactReduxContextValue<
 }
 
 export const ReactReduxContext =
-  /*#__PURE__*/ React.createContext<ReactReduxContextValue>(null as any)
+  /*#__PURE__*/ createContext<ReactReduxContextValue>(null as any)
 
 export type ReactReduxContextInstance = typeof ReactReduxContext
 

test/components/Provider.spec.tsx

@@ -1,8 +1,8 @@
 /*eslint-disable react/prop-types*/
 
 import * as React from 'react'
-import { Component, Dispatch } from 'react'
-import * as ReactDOM from 'react-dom'
+import { Component, Dispatch, StrictMode } from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
 import { createStore } from 'redux'
 import { Provider, connect, ReactReduxContext } from '../../src/index'
 import * as rtl from '@testing-library/react'
@@ -312,18 +312,18 @@ describe('React', () => {
     })
 
     it('works in <StrictMode> without warnings (React 16.3+)', () => {
-      if (!React.StrictMode) {
+      if (!StrictMode) {
         return
       }
       const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
       const store = createStore(() => ({}))
 
       rtl.render(
-        <React.StrictMode>
+        <StrictMode>
           <Provider store={store}>
             <div />
           </Provider>
-        </React.StrictMode>
+        </StrictMode>
       )
 
       expect(spy).not.toHaveBeenCalled()
@@ -344,15 +344,15 @@ describe('React', () => {
       }
 
       const div = document.createElement('div')
-      ReactDOM.render(
+      render(
         <Provider store={store}>
           <div />
         </Provider>,
         div
       )
 
       expect(spy).toHaveBeenCalledTimes(0)
-      ReactDOM.unmountComponentAtNode(div)
+      unmountComponentAtNode(div)
       expect(spy).toHaveBeenCalledTimes(1)
     })
 

test/components/hooks.spec.tsx

@@ -1,13 +1,14 @@
 /*eslint-disable react/prop-types*/
 
 import * as React from 'react'
+import { useState, useEffect, version as reactVersion } from 'react'
 import { createStore } from 'redux'
 import { Provider as ProviderMock, connect } from '../../src/index'
 import * as rtl from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import type { AnyAction } from 'redux'
 
-const IS_REACT_18 = React.version.startsWith('18')
+const IS_REACT_18 = reactVersion.startsWith('18')
 
 describe('React', () => {
   describe('connect', () => {
@@ -61,11 +62,11 @@ describe('React', () => {
       })
 
       const component1 = (props: Omit<RootStateType, 'byId'>) => {
-        const [state, setState] = React.useState({ list: props.list })
+        const [state, setState] = useState({ list: props.list })
 
         component1StateList = state.list
 
-        React.useEffect(() => {
+        useEffect(() => {
           setState((prevState) => ({ ...prevState, list: props.list }))
         }, [props.list])
 

test/integration/dynamic-reducers.spec.tsx

@@ -1,7 +1,8 @@
 /*eslint-disable react/prop-types*/
 
 import * as React from 'react'
-import * as ReactDOMServer from 'react-dom/server'
+import { createContext } from 'react'
+import { renderToString } from 'react-dom/server'
 import { createStore, combineReducers } from 'redux'
 import { connect, Provider, ReactReduxContext } from '../../src/index'
 import * as rtl from '@testing-library/react'
@@ -29,9 +30,7 @@ describe('React', () => {
     because it's the popular approach, this test targets nr 3.
   */
   describe('dynamic reducers', () => {
-    const InjectReducersContext = React.createContext<
-      ((r: any) => void) | null
-    >(null)
+    const InjectReducersContext = createContext<((r: any) => void) | null>(null)
 
     type Reducer = (s: any) => any
 
@@ -185,7 +184,7 @@ describe('React', () => {
       // @ts-ignore
       console.error.mockImplementation(() => {})
 
-      const markup = ReactDOMServer.renderToString(
+      const markup = renderToString(
         <Provider store={store}>
           <InjectReducersContext.Provider value={injectReducers}>
             <InitialGreeting />

test/typetests/react-redux-types.typetest.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-inner-declarations */
-import { Component, ReactElement } from 'react'
+import {
+  createElement,
+  Component,
+  ComponentType,
+  ReactElement,
+  ReactNode,
+} from 'react'
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import { render } from 'react-dom'
 import {
   configureStore,
   createSlice,
@@ -91,15 +97,15 @@ connect<ICounterStateProps, ICounterDispatchProps, {}, {}, CounterState>(
 )(Counter)
 
 class App extends Component<any, any> {
-  render(): React.ReactNode {
+  render(): ReactNode {
     // ...
     return null
   }
 }
 
 const targetEl = document.getElementById('root')
 
-ReactDOM.render(
+render(
   <Provider store={store}>
     <App />
   </Provider>,
@@ -129,7 +135,7 @@ type AddTodoAction = ReturnType<typeof addTodo>
 declare var todoActionCreators: { [type: string]: (...args: any[]) => any }
 declare var counterActionCreators: { [type: string]: (...args: any[]) => any }
 
-ReactDOM.render(
+render(
   <Provider store={store}>
     <MyRootComponent />
   </Provider>,
@@ -246,7 +252,7 @@ class TestComponent extends Component<TestProp, TestState> {}
 const WrappedTestComponent = connect()(TestComponent)
 
 // return value of the connect()(TestComponent) is of the type TestComponent
-let ATestComponent: React.ComponentType<TestProp>
+let ATestComponent: ComponentType<TestProp>
 ATestComponent = TestComponent
 ATestComponent = WrappedTestComponent
 
@@ -271,11 +277,8 @@ function HelloMessage(props: HelloMessageProps) {
   return <div>Hello {props.name}</div>
 }
 let ConnectedHelloMessage = connect()(HelloMessage)
-ReactDOM.render(
-  <HelloMessage name="Sebastian" />,
-  document.getElementById('content')
-)
-ReactDOM.render(
+render(<HelloMessage name="Sebastian" />, document.getElementById('content'))
+render(
   <ConnectedHelloMessage name="Sebastian" />,
   document.getElementById('content')
 )
@@ -324,7 +327,7 @@ namespace TestTOwnPropsInference {
     state: string
   }
 
-  class OwnPropsComponent extends React.Component<OwnProps & StateProps, {}> {
+  class OwnPropsComponent extends Component<OwnProps & StateProps, {}> {
     render() {
       return <div />
     }
@@ -352,28 +355,28 @@ namespace TestTOwnPropsInference {
   )(OwnPropsComponent)
 
   // @ts-expect-error
-  React.createElement(ConnectedWithoutOwnProps, { anything: 'goes!' })
+  createElement(ConnectedWithoutOwnProps, { anything: 'goes!' })
 
   // This compiles, as expected.
-  React.createElement(ConnectedWithOwnProps, { own: 'string' })
+  createElement(ConnectedWithOwnProps, { own: 'string' })
 
   // This should not compile, which is good.
   // @ts-expect-error
-  React.createElement(ConnectedWithOwnProps, { missingOwn: true })
+  createElement(ConnectedWithOwnProps, { missingOwn: true })
 
   // This compiles, as expected.
-  React.createElement(ConnectedWithTypeHint, { own: 'string' })
+  createElement(ConnectedWithTypeHint, { own: 'string' })
 
   // This should not compile, which is good.
   // @ts-expect-error
-  React.createElement(ConnectedWithTypeHint, { missingOwn: true })
+  createElement(ConnectedWithTypeHint, { missingOwn: true })
 
   interface AllProps {
     own: string
     state: string
   }
 
-  class AllPropsComponent extends React.Component<AllProps & DispatchProp> {
+  class AllPropsComponent extends Component<AllProps & DispatchProp> {
     render() {
       return <div />
     }