How to use the rax.useEffect function in rax

function App(props) {
  const { appConfig, history, routes, InitialComponent } = props;
  const { component } = useRouter(() => ({ history, routes, InitialComponent }));

  if (isNullableComponent(component)) {
    // Return null directly if not matched.
    return null;
  } else {
    const [pageInitialProps, setPageInitialProps] = useState(
      // If SSR is enabled, set pageInitialProps: {pagePath: pageData}
      initialDataFromSSR ? { [initialDataFromSSR.pagePath || '']: initialDataFromSSR.pageData || {} } : {}
    );

    // If SSR is enabled, process getInitialProps method
    if (isWeb && initialDataFromSSR && component.getInitialProps && !pageInitialProps[component.__path]) {
      useEffect(() => {
        const getInitialPropsPromise = component.getInitialProps();

        // Check getInitialProps returns promise.
        if (process.env.NODE_ENV !== 'production') {
          if (!getInitialPropsPromise.then) {
            throw new Error('getInitialProps should be async function or return a promise. See detail at "' + Component.name + '".');
          }
        }

        getInitialPropsPromise.then((nextDefaultProps) => {
          if (nextDefaultProps) {
            // Process pageData from SSR
            const pageData = initialDataFromSSR && initialDataFromSSR.pagePath === component.__path ? initialDataFromSSR.pageData : {};
            // Do not cache getInitialPropsPromise result
            setPageInitialProps(Object.assign({}, { [component.__path]: Object.assign({}, pageData, nextDefaultProps) }));
          }

export default function useTimeout(fn, delay) {
  const ref = useRef();

  // Update to the latest function.
  useEffect(() => {
    ref.fn = fn;
  }, [fn]);

  useEffect(() => {
    // Clear before timer if delay time updated
    clearTimer(ref.id);
    if (typeof delay === 'number') {
      ref.id = setTimeout(() => ref.fn(), delay);
      return () => clearTimer(ref.id);
    }
  }, [delay]);
}

case 'show':
    case 'hide':
      useEffect(() => {
        visibleListeners[cycle].push(callback);
        return () => {
          const index = visibleListeners[cycle].indexOf(callback);
          visibleListeners[cycle].splice(index, 1);
        };
      });
  }

  // Invoke first time show.
  if (cycle === 'show') {
    if (initialShow === false) {
      initialShow = true;
      useEffect(() => {
        invokeCycle('show');
      });
    }
  }
}

export default function useInterval(fn, delay) {
  const ref = useRef();

  // Update to the latest function.
  useEffect(() => {
    ref.fn = fn;
  }, [fn]);

  useEffect(() => {
    // Clear before timer if delay time updated
    clearTimer(ref.id);
    if (typeof delay === 'number') {
      ref.id = setInterval(() => ref.fn(), delay);
      return () => clearTimer(ref.id);
    }
  }, [delay]);
}

export default function Navigation(props) {
  const { appConfig, component, history, routes } = props;
  const { maxAlivePageNum, tabBar } = appConfig;

  const [updateTemp, setUpdateTemp] = useState(null);

  const Component = component;
  const currentPathname = history.location.pathname;
  const currentPage = routes.find(route => route.path === currentPathname) || {};

  const isAlivePage = currentPage.keepAlive;
  useEffect(() => {
    history.listen(() => {
      _updatePageTrigger(Date.now());
    });
    // Use display control alive page, need get alive page list.
    routes.forEach((route) => {
      if (route.keepAlive) {
        alivePages.push(route);
      }
    });
    // If current page is alive page, need update routes.
    if (isAlivePage) {
      _updatePageTrigger(Date.now());
    }
  }, []);

  // Props to page component

const { routerConfig = {}, tabConfig = {}, aliveConfig = {}, useRouter } = props;

  const { history, routes = [] } = routerConfig;
  const { textColor = '#666', selectedColor = '#333', backgroundColor = '#fff', items = [] } = tabConfig;
  const { maxSavePath = 5, paths = [] } = aliveConfig;

  const [updateTemp, setUpdateTemp] = useState(null);

  const { Router } = useRouter(routerConfig);

  maxSavePathNum = maxSavePath;
  routerProps = props;
  routerList = routes;
  updateComponentTrigger = setUpdateTemp;

  useEffect(() => {
    history.listen(() => {
      updateComponentTrigger(Date.now());
    });
  }, []);


  if (isNode && routerConfig.InitialComponent) {
    return createElement(routerConfig.InitialComponent, props);
  }

  const isKeepAlivePage = !!paths.find(pathItem => pathItem === history.location.pathname);
  const isTabBarPageTabBar = !!items.find(item => item.pagePath === history.location.pathname);

  if (isFirstTimeRender && routerConfig.InitialComponent) {
    isFirstTimeRender = false;
    const getInitialComponent = routerConfig.InitialComponent;

function Provider({ store, context, children }) {
  const contextValue = useMemo(() => {
    const subscription = new Subscription(store);
    subscription.onStateChange = subscription.notifyNestedSubs;
    return {
      store,
      subscription
    };
  }, [store]);

  const previousState = useMemo(() => store.getState(), [store]);

  useEffect(() => {
    const { subscription } = contextValue;
    subscription.trySubscribe();

    if (previousState !== store.getState()) {
      subscription.notifyNestedSubs();
    }
    return () => {
      subscription.tryUnsubscribe();
      subscription.onStateChange = null;
    };
  }, [contextValue, previousState]);

  const Context = context || ReactReduxContext;

  return {children};
}