refactor(*): favor destructuring for React's types

src/app/App.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import Routing from '~/components/routing';
 
 import './assets/scss/styles.scss';
 
-const App = (): React.ReactElement => <Routing />;
+const App = (): ReactElement => <Routing />;
 
 export default App;

src/app/components/common/ImgLoader/ImgLoader.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, memo } from 'react';
+import React, { useState, useEffect, memo, ReactElement } from 'react';
 
 import Spinner from '~/components/base/Spinner';
 
@@ -11,7 +11,7 @@ type PropsType = {
   onError?: (error: string | Event) => void;
 };
 
-function ImgLoader({ src, onError }: PropsType): React.ReactElement {
+function ImgLoader({ src, onError }: PropsType): ReactElement {
   const [imgObj, setImg] = useState({ img: '', isLoading: true });
 
   const image = new Image();

src/app/components/common/LazyComponent/LazyComponent.test.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, RenderResult } from '@testing-library/react';
 
 import LazyComponent from './LazyComponent';
 
-const Example = (): React.ReactElement => <div>Some Component</div>;
+const Example = (): ReactElement => <div>Some Component</div>;
 
 describe('LazyComponent', () => {
   // eslint-disable-next-line prettier/prettier
@@ -14,7 +14,7 @@ describe('LazyComponent', () => {
     await act(async () => {
       testRenderer = render(
         <LazyComponent
-          getModule={(): Promise<{ default: () => React.ReactElement }> =>
+          getModule={(): Promise<{ default: () => ReactElement }> =>
             Promise.resolve({ default: Example })
           }
         />,

src/app/components/common/LazyComponent/LazyComponent.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, ReactElement, ElementType } from 'react';
 
-type GetModule = () => Promise<{ default: () => React.ReactElement }>;
+type GetModule = () => Promise<{ default: () => ReactElement }>;
 
 type PropsType = {
   getModule: GetModule;
-  children?: React.ElementType;
+  children?: ElementType;
 };
 
-const LazyComponent = ({ getModule, ...rest }: PropsType): React.ReactElement | null => {
-  const [AsyncModule, setAsyncModule] = useState<(() => React.ReactElement) | null>(null);
+const LazyComponent = ({ getModule, ...rest }: PropsType): ReactElement | null => {
+  const [AsyncModule, setAsyncModule] = useState<(() => ReactElement) | null>(null);
 
   useEffect(() => {
     (async (): Promise<void> => {

src/app/components/core/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -9,7 +9,7 @@ import Icon from '~/components/base/Icon';
 
 import './Footer.scss';
 
-const Footer = (): React.ReactElement => {
+const Footer = (): ReactElement => {
   const { social }: FooterType = useSelector(getFooter);
 
   return (

src/app/components/core/Header/Header.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import Navigation from '~/components/core/Navigation';
 import UserMenu from '~/components/core/UserMenu';
 
-const Header = (): React.ReactElement => (
+const Header = (): ReactElement => (
   <div className="d-flex vw-100 justify-content-between border-bottom bg-white">
     <Navigation />
     <UserMenu />

src/app/components/core/Navigation/Navigation.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable prettier/prettier */
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { NavLink } from 'react-router-dom';
 
 type Links = Array<{
@@ -10,7 +10,7 @@ type Links = Array<{
 
 const links: Links = [];
 
-function Navigation(): React.ReactElement {
+function Navigation(): ReactElement {
   return (
     <nav className="navbar navbar-expand-lg">
       <NavLink to="/" className="navbar-brand">

src/app/components/core/UserMenu/UserMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, ReactElement } from 'react';
 import { useSelector } from 'react-redux';
 import Icon from '~/components/base/Icon';
 import useLazy from '~/hooks/useLazy';
@@ -8,7 +8,7 @@ import { getCart } from '~/store/modules/cart/selectors';
 
 import './UserMenu.scss';
 
-const UserMenu = (): React.ReactElement => {
+const UserMenu = (): ReactElement => {
   const [open, setOpen] = useState(false);
   const cart: CartType = useSelector(getCart);
 

src/app/components/pages/Home/Home.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable prettier/prettier */
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactElement } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Spinner from '~/components/base/Spinner';
@@ -8,13 +8,13 @@ import ProductCard from '~/components/common/ProductCard';
 import { fetchProducts } from '~/store/modules/products/actions';
 import { getProducts } from '~/store/modules/products/selectors';
 
-import { ProductsType } from '~/store/modules/products/types';
+import { ProductsStateType } from '~/store/modules/products/types';
 
 import './Home.scss';
 
-const Home = (): React.ReactElement => {
+const Home = (): ReactElement => {
   const dispatch = useDispatch();
-  const { isLoading, products, error }: ProductsType = useSelector(getProducts);
+  const { isLoading, products, error }: ProductsStateType = useSelector(getProducts);
 
   useEffect(() => {
     dispatch(fetchProducts(`/products`));

src/app/components/routing/Routing.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { Route } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
@@ -11,7 +11,7 @@ import Home from '~/components/pages/Home';
 
 // const Loading = () => (<div>...</div>);
 
-const Routing = (): React.ReactElement => (
+const Routing = (): ReactElement => (
   <main>
     <Layout>
       <Route exact path="/" component={Home} />

src/app/hooks/useLazy/useLazy.tsx

@@ -1,12 +1,12 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, ReactElement } from 'react';
 
 /**
  * @link https://stackoverflow.com/questions/52112948/whats-the-return-type-of-a-dynamic-import
  */
-type DynamicImport = () => Promise<{ default: () => React.ReactElement }>;
+type DynamicImport = () => Promise<{ default: () => ReactElement }>;
 
-const useLazy = (getModule: DynamicImport, cond = false): (() => React.ReactElement) | null => {
-  const [AsyncModule, setAsyncModule] = useState<(() => React.ReactElement) | null>(null);
+const useLazy = (getModule: DynamicImport, cond = false): (() => ReactElement) | null => {
+  const [AsyncModule, setAsyncModule] = useState<(() => ReactElement) | null>(null);
 
   useEffect(() => {
     (async (): Promise<void> => {

src/app/shared/utils/testing/renderWithRedux.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement, Component } from 'react';
 import { createStore, Store } from 'redux';
 import { Provider } from 'react-redux';
 
@@ -17,7 +17,7 @@ export interface RenderWithRedux extends RenderResult {
 }
 
 export default function renderWithRedux(
-  ui: React.ReactElement | React.Component,
+  ui: ReactElement | Component,
   { initialState, store = createStore(reducer, initialState) }: WithReduxConfig = {},
 ): RenderWithRedux {
   return {