This is a workaround to the fact that errors thrown in `useEffect` and similar cause the whole react tree to unmount. It takes the error and throws it inside the render tree instead.

useThrowUnhandledError.tsx

/**
 * This is a workaround to the fact that errors thrown in `useEffect` and similar cause the whole
 * react tree to unmount. It takes the error and throws it inside the render tree instead.
 *
 * Taken from https://www.developerway.com/posts/how-to-handle-errors-in-react and
 * https://github.com/facebook/react/issues/14981#issuecomment-468460187.
 *
 * Usage:
 * ```
 * const Component = () => {
 *  const throwUnhandledError = useThrowUnhandledError();
 *
 *  useEffect(() => {
 *    try {
 *      // something dangerous
 *    } catch(e) {
 *      throwUnhandledError(e);
 *    }
 *  })
 * }
 * ```
 */
export const useThrowUnhandledError = () => {
  const setState = useState()[1];

  return useCallback(
    (error: Error) =>
      setState(() => {
        throw error;
      }),
    [setState]
  );
};