React Custom Hooks

Clock.tsx

import React from "react";
import { useInterval } from "./useInterval";

const now = () => new Date();

export const Clock = () => {
  const date = useInterval(1000, now, now);

  return (
    <div>
      <h1>Clock</h1>
      <h2>{date.toLocaleString()}</h2>
    </div>
  );
};

export default Clock;

useInterval.ts

import { useState, useEffect } from "react";

export function useInterval<T>(
  interval: number,
  init: T | () => T,
  update: (prev: T) => T
): T {
  const [state, setState] = useState(init);

  useEffect(() => {
    const tick = () => setState(update);
    const id = setInterval(tick, interval);
    return () => clearInterval(id);
  }, [interval, update]);

  return state;
}

useRerender.ts

import { useCallback, useState } from "react";

export const useRerender = () => {
  const [, setDummy] = useState();
  const forceUpdate = useCallback(() => {
    const newRef = {};
    setDummy(newRef);
  }, []);
  return { forceUpdate };
};

useTimeout.ts

import { useState, useEffect } from "react";

export const useTimeout = (initial, fallback, timeout) => {
  const [state, setState] = useState(initial);

  useEffect(() => {
    const timer = setTimeout(() => setState(fallback), timeout);
    return () => clearTimeout(timer);
  }, [state, fallback, timeout]);

  return [state, setState];
};

useUnmounted.ts

import { useEffect, useRef } from "react";

const useUnmounted = () => {
  const unmounted = useRef(false);
  useEffect(() => {
    // no-op on mounted
    return () => {
      unmounted.current = true;
    };
  }, []); // once at the first mount
  return unmounted;
};

Pass init, update from out of the Functional Component using useInterval to avoid re-renderings.

https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

types

    type SetStateAction<S> = S | ((prevState: S) => S);
    type Dispatch<A> = (value: A) => void;
    function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

• https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b8f4f8a0c8d6d94e983c49718afd3ed1b32d1a81/types/react/index.d.ts#L878
• https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b8f4f8a0c8d6d94e983c49718afd3ed1b32d1a81/types/react/index.d.ts#L838
• https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b8f4f8a0c8d6d94e983c49718afd3ed1b32d1a81/types/react/index.d.ts#L835

force update to rerender

• https://stackoverflow.com/a/53215514
• https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update