chore: minimum react version is 16.14.0 now

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
       matrix:
         node-version: [14.x, 16.x, 18.x]
         ts-version: [4.4.x, 4.5.x, 4.6.x, 4.7.x]
-        react-version: ['16.9.0', 16.x, 17.x, 18.x]
+        react-version: ['16.14.0', 16.x, 17.x, 18.x]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -37,7 +37,7 @@ jobs:
     strategy:
       matrix:
         node-version: [14.x, 16.x, 18.x]
-        react-version: ['16.9.0', 16.x, 17.x]
+        react-version: ['16.14.0', 16.x, 17.x]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

package.json

@@ -46,7 +46,7 @@
     ]
   },
   "peerDependencies": {
-    "react": "^16.9 || ^17 || ^18",
+    "react": "^16.14 || ^17 || ^18",
     "typescript": "^4.4"
   },
   "peerDependenciesMeta": {

src/model/useDefined.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { DestroyLodingAction, DESTROY_LOADING } from '../actions/loading';
 import { loadingStore } from '../store/loadingStore';
 import { modelStore } from '../store/modelStore';
@@ -17,14 +17,14 @@ export const useDefined = <
   globalModel: Model<string, State, Action, Effect, Computed>,
 ): HookModel<string, State, Action, Effect, Computed> => {
   const modelName = globalModel.name;
-  const initialCount = React.useState(() => nameCounter++)[0];
+  const initialCount = useState(() => nameCounter++)[0];
 
   const uniqueName =
     process.env.NODE_ENV === 'production'
       ? useProdName(modelName, initialCount)
       : useDevName(modelName, initialCount, new Error());
 
-  const hookModel = React.useMemo(() => {
+  const hookModel = useMemo(() => {
     return cloneModel(uniqueName, globalModel);
   }, [uniqueName]);
 
@@ -34,7 +34,7 @@ export const useDefined = <
 const useProdName = (modelName: string, count: number) => {
   const uniqueName = modelName + '#' + count;
 
-  React.useEffect(
+  useEffect(
     () => () => {
       setTimeout(unmountModel, 0, uniqueName);
     },
@@ -52,12 +52,12 @@ const useProdName = (modelName: string, count: number) => {
  * Warning: Cannot update a component (`XXX`) while rendering a different component (`XXX`)
  */
 const useDevName = (modelName: string, count: number, err: Error) => {
-  const [cache, setCache] = React.useState({
+  const [cache, setCache] = useState({
     name: modelName,
     count: count,
   });
 
-  const componentName = React.useMemo((): string => {
+  const componentName = useMemo((): string => {
     try {
       const stacks = err.stack!.split('\n');
 
@@ -76,12 +76,12 @@ const useDevName = (modelName: string, count: number, err: Error) => {
 
   const uniqueName = `${componentName}:${count}:${modelName}`;
 
-  React.useMemo(() => {
+  useMemo(() => {
     timesCounter[uniqueName] ||= 0;
     ++timesCounter[uniqueName];
   }, [uniqueName]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (cache.name !== modelName || cache.count !== count) {
       setCache({
         name: modelName,
@@ -90,7 +90,7 @@ const useDevName = (modelName: string, count: number, err: Error) => {
     }
   }, [modelName, count]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const currentTimes = timesCounter[uniqueName];
     return () => {
       setTimeout(() => {

src/persist/PersistGate.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { ReactNode, FC } from 'react';
+import React, { ReactNode, FC, useState, useEffect } from 'react';
 import { modelStore } from '../store/modelStore';
 import { isFunction } from '../utils/isType';
 
@@ -9,10 +8,10 @@ export interface PersistGateProps {
 }
 
 export const PersistGate: FC<PersistGateProps> = (props) => {
-  const [isReady, setIsReady] = React.useState(() => modelStore.isReady);
+  const [isReady, setIsReady] = useState(() => modelStore.isReady);
   const { loading = null, children } = props;
 
-  React.useEffect(() => {
+  useEffect(() => {
     isReady ||
       modelStore.onInitialized().then(() => {
         setIsReady(true);

src/redux/FocaProvider.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { FC } from 'react';
+import React, { FC } from 'react';
 import { Provider } from 'react-redux';
 import { ProxyContext, ModelContext, LoadingContext } from './contexts';
 import { modelStore } from '../store/modelStore';

src/redux/contexts.ts

@@ -1,17 +1,17 @@
-import React from 'react';
+import { createContext } from 'react';
 import type { ReactReduxContextValue } from 'react-redux';
 
-export const ModelContext = React.createContext<ReactReduxContextValue>(
+export const ModelContext = createContext<ReactReduxContextValue>(
   // @ts-expect-error
   null,
 );
 
-export const LoadingContext = React.createContext<ReactReduxContextValue>(
+export const LoadingContext = createContext<ReactReduxContextValue>(
   // @ts-expect-error
   null,
 );
 
-export const ProxyContext = React.createContext<ReactReduxContextValue>(
+export const ProxyContext = createContext<ReactReduxContextValue>(
   // @ts-expect-error
   null,
 );