- useState
- useEffect
- useRef
- useMemo
- useCallback
- useContext (wip)

- createContext

// example in react-native

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { withHooks, Hooks } from 'retro-hooks';

// wrap a functional react component with `withHooks` to access the hooks api

const MyComponent = withHooks<Props>(({ useState, useEffect, useRef }, props) => {

  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log(`counter changed to ${counter}`);
  }, [counter]);

  return (
    <View>
      <Text>{counter}</Text>
      <Button onPress={() => setCounter(c => c + 1)} title="increment" />
    </View>
  );
});

/* ./useRedux.ts */

import { Hooks } from 'retro-hooks';
import { getReduxStore, RootState } from './mystore';
import deepEquals from './mydeepequals';

export type StoreState = RootState;

// notice that the hooks object given by `withHooks` must be explicitly passed to custom hooks
export default <SubState>({ useState, useEffect }: Hooks, selectSubstate: (state: RootState) => SubState, inputs?: unknown[]): SubState => {
  const [substate, setSubstate] = useState(() => selectSubstate(getReduxStore().getState()));

  const checkForUpdates = (prevState: SubState) => {
    const nextSubstate = selectSubstate(getReduxStore().getState());
    if (!deepEquals(prevState, nextSubstate)) {
      setSubstate(nextSubstate);
      return nextSubstate;
    } else {
      return prevState;
    }
  };

  useEffect(() => {
    let prevState = substate;
    return getReduxStore().subscribe(() => prevState = checkForUpdates(prevState));
  }, inputs);

  return substate;
}


/* ./app.ts */

import useRedux from './useRedux.ts';

const MyApp = (_props: {}) => {
  const mySubState = useRedux(rootReduxState => rootReduxState.subReduxState);
  return <View>{mySubState}</View>;
}