treyhuffine

const refContainer = useRef(initialValue);

treyhuffine

const computeExpensiveValue = (end: number) => {
  let result = 0;

  for (let i = 0; i < end * 1000000; i++) {
    for (let j = 0; i < end * 1000; j++) {
       result = result + i - j;
    }
  }

  return result;

treyhuffine

function useMemo<T>(factory: () => T, deps: DependencyList): T;

treyhuffine

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

treyhuffine

function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

treyhuffine

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

treyhuffine

const [state, dispatch] = useReducer(reducer, initialState, init);

treyhuffine

import { createContext, useContext } from 'react';
props ITheme {
  backgroundColor: string;
  color: string;
}
// The standard way to create context. It takes an initial value object
const ThemeContext = createContext<ITheme>({
  backgroundColor: 'black',
  color: 'white',
})

treyhuffine

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
// The first argument, `effect`
type EffectCallback = () => (void | (() => void | undefined));
// The second argument, `deps?`
type DependencyList = ReadonlyArray<any>;

treyhuffine

useEffect(() => {
  const subscription = props.source.beginAPIPoll();
  return () => {
    // Clean up the subscription
    subscription.cancelAPIPoll();
  };
});