add lazy loading

src/components/redux-form/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { reduxForm, Field } from "redux-form";
 
 import { renderField, renderSelect } from "../form-elements";
@@ -51,8 +51,10 @@ const Form = props => {
 	);
 };
 
-export default reduxForm({
-	form: "todo",
-	validate: (values, props) => validate(values),
-	enableReinitialize: true
-})(Form);
+export default memo(
+	reduxForm({
+		form: "todo",
+		validate: (values, props) => validate(values),
+		enableReinitialize: true
+	})(Form)
+);

src/containers/auth.js

@@ -10,7 +10,6 @@ import { LocalContext } from "../utils/localContext";
 
 class Auth extends Component {
 	static contextType = LocalContext;
-
 	state = { auth: true };
 
 	toggleAuthProperty = () => this.setState(prevState => ({ ...prevState, auth: !prevState.auth }));

src/containers/hooks.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-export const Hooks = () => {
+export default () => {
 	const [count, setCount] = useState(100);
 	const [value, setValue] = useState("");
 

src/router.js

@@ -1,18 +1,8 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import { Switch } from "react-router-dom";
 import { connect } from "react-redux";
 import { getUserById } from "./actions/auth";
 
-import Main from "./containers/main";
-import Item from "./containers/item";
-import AboutUs from "./containers/aboutUs";
-import Todo from "./containers/todo";
-import Auth from "./containers/auth";
-import TodoRedux from "./containers/todoRedux";
-import ThunkTodo from "./containers/thunkTodo";
-import ReduxForm from "./containers/redux-form";
-import { Hooks } from "./containers/hooks";
-
 import { LocalContext, setLanguage } from "./utils/localContext";
 import { setCssVariables } from "./utils/setSCCvariables";
 import { GLOBAL_DEFAULT_THEME } from "./contants";
@@ -31,7 +21,7 @@ export const ROUTERS = [
 		exact: true,
 		path: "/",
 		protected: true,
-		component: Main
+		component: lazy(() => import("./containers/main"))
 	},
 	{
 		id: 2,
@@ -43,7 +33,7 @@ export const ROUTERS = [
 		exact: true,
 		path: "/auth",
 		protected: false,
-		component: Auth
+		component: lazy(() => import("./containers/auth"))
 	},
 	{
 		id: 3,
@@ -55,7 +45,7 @@ export const ROUTERS = [
 		hasAccess: [0, 1],
 		path: "/redux-todo",
 		protected: false,
-		component: TodoRedux
+		component: lazy(() => import("./containers/todoRedux"))
 	},
 	{
 		id: 4,
@@ -67,7 +57,7 @@ export const ROUTERS = [
 		exact: true,
 		path: "/todo",
 		protected: false,
-		component: Todo
+		component: lazy(() => import("./containers/todo"))
 	},
 	{
 		id: 10,
@@ -79,7 +69,7 @@ export const ROUTERS = [
 		exact: true,
 		path: "/redux-form",
 		protected: false,
-		component: ReduxForm
+		component: lazy(() => import("./containers/redux-form"))
 	},
 	{
 		id: 5,
@@ -91,7 +81,7 @@ export const ROUTERS = [
 		exact: true,
 		path: "/thunk-todo",
 		protected: false,
-		component: ThunkTodo
+		component: lazy(() => import("./containers/thunkTodo"))
 	},
 	{
 		id: 6,
@@ -100,7 +90,7 @@ export const ROUTERS = [
 		hasAccess: [0, 1],
 		path: "/item/:id",
 		protected: false,
-		component: Item
+		component: lazy(() => import("./containers/item"))
 	},
 	{
 		id: 7,
@@ -112,7 +102,7 @@ export const ROUTERS = [
 		exact: true,
 		path: "/hooks",
 		protected: true,
-		component: Hooks
+		component: lazy(() => import("./containers/hooks"))
 	},
 	{
 		id: 8,
@@ -124,7 +114,7 @@ export const ROUTERS = [
 		exact: true,
 		path: "/about-us",
 		protected: true,
-		component: AboutUs
+		component: lazy(() => import("./containers/aboutUs"))
 	},
 	{
 		id: 9,
@@ -179,18 +169,20 @@ class Router extends React.Component {
 					setCssVariables: this.setTheme,
 					theme: this.state.theme
 				}}>
-				<Switch>
-					{ROUTERS.map(route => (
-						<PrivateRouter
-							key={route.id}
-							exact={route.exact}
-							path={route.path}
-							protectedRoute={route.protected}
-							component={route.component}
-							hasAccess={route.hasAccess}
-						/>
-					))}
-				</Switch>
+				<Suspense fallback={<div>Loading...</div>}>
+					<Switch>
+						{ROUTERS.map(route => (
+							<PrivateRouter
+								key={route.id}
+								exact={route.exact}
+								path={route.path}
+								protectedRoute={route.protected}
+								component={route.component}
+								hasAccess={route.hasAccess}
+							/>
+						))}
+					</Switch>
+				</Suspense>
 			</LocalContext.Provider>
 		);
 	}