always use function parameters

example.ts

function Example() {
  // Crap, we just made a Firebase query for each render instead of
  // what we wanted, a query set up on mount, and cleaned up on unmount
  const query = useQuery(db.collections('lots-of-stuff').limit(10000));
  return <ul>query.docs.map(x => (<li>{x}</li>));
}

this-code-sucks.ts

export function useQuery(query: /*Firebase */Query) {
  return useObservable<QuerySnapshot>(() =>
    concat(
      query.get(),
      queryUpdates(q).pipe(filter(x => x && x.docChanges().length > 0))
    )
  );
}

export function useQueryMoreBetter(query: () => Query) {
  const [q] = useState(query);

  return useObservable<QuerySnapshot>(() =>
    concat(
      q.get(),
      queryUpdates(q).pipe(filter(x => x && x.docChanges().length > 0))
    )
  );
}


export function useObservable<T>(
  target: () => Observable<T>,
  initial?: T
): T | undefined {
  const [ret, setter] = useState(initial);
  const [obs] = useState(target());

  useEffect(
    () => {
      const sub = obs.subscribe(setter);
      return sub.unsubscribe.bind(sub);
    },
    [obs]
  );

  return ret;
}