message: Split states and navigation into separate effects
diff: -import React, {useEffect, useRef, useState} from 'react';
  +import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
  import { StateNavigator } from 'navigation';
  import { NavigationHandler } from 'navigation-react';
  import { NavigationStack } from 'navigation-react-native';
  @@ -8,7 +8,6 @@ const Stack = ({ children, ...props }) => {
  const stateNavigator = stateNavigatorRef.current;
  const [states, setStates] = useState([]);
  useEffect(() => {
  - const validateNavigation = ({ __deleted }) => !__deleted;
  setStates(oldStates => {
  const { newStates, newStatesLookup } = React.Children.toArray(children)
  .reduce(({ newStates, newStatesLookup }, { props: { name, ...rest }}) => {
  @@ -20,20 +19,23 @@ const Stack = ({ children, ...props }) => {
  if (!newStatesLookup[oldState.key])
  newStates.push({ ...oldState, __deleted: true });
  }
  + return newStates;
  + });
  + }, [ children ]);
  + useLayoutEffect(() => {
  const { state, url } = stateNavigator.stateContext;
  - stateNavigator.configure(newStates);
  + stateNavigator.configure(states);
  let changed = !state;
  if (!changed) {
  const { state, crumbs } = stateNavigator.parseLink(url);
  changed = state.__deleted || crumbs.filter(({ state }) => state.__deleted).length;
  }
  - if (changed && newStates.length)
  - stateNavigator.navigate(newStates[0].key);
  + if (changed && states.length)
  + stateNavigator.navigate(states[0].key);
  + const validateNavigation = ({ __deleted }) => !__deleted;
  stateNavigator.onBeforeNavigate(validateNavigation);
  - return newStates;
  - });
  return () => stateNavigator.offBeforeNavigate(validateNavigation);
  - }, [ children ]);
  + }, [ states ]);
  return !!states.length && (
  <NavigationHandler stateNavigator={stateNavigator}>
  <NavigationStack {...props} />
  