useEffect hooks are not flushed when app is backgrounded

App.js

import React, { Component, useState, useEffect, useLayoutEffect } from "react";
import { Text, AppState } from "react-native";

export const useAppState = () => {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const onChange = newState => {
      setAppState(newState);
    };

    AppState.addEventListener('change', onChange);

    return () => {
      AppState.removeEventListener('change', onChange);
    };
  }, []);

  return appState;
};

const AppStateView = () => {
  const appState = useAppState();

  useEffect(() => {
    console.log(">>> [useEffect] new app state:", appState);
  }, [appState]);

  useLayoutEffect(() => {
    console.log(">>> [useLayoutEffect] new app state:", appState);
  }, [appState]);

  return <Text>{appState}</Text>;
};

export default class App extends Component {
  render() {
    return <AppStateView />;
  }
}