zzdjk6

let _detectedFlexGapSupported = false;
let _isFlexGapSupported = false;

export const checkFlexGapSupported = (): boolean => {
  if (_detectedFlexGapSupported) {
    return _isFlexGapSupported;
  }

  // create flex container with row-gap set
  const flex = document.createElement("div");

zzdjk6

const MyComponent: React.FC = () => {
  return (
    <Data1Guard>
      {(data1) => (
        <Data2Guard data1={data1}>
          {(data2) => (
            <AggregateDataGuard data1={data1} data2={data2}>
              {(result) => <ResultDisplay result={result} />}
            </AggregateDataGuard>
          )}

zzdjk6

type Data1GuardProps = {
  children: (data1: Data1) => JSX.Element;
};
const Data1Guard: React.FC<Data1GuardProps> = ({ children }) => {
  const data1 = useData1();
  if (!data1) {
    return null;
  }

  return children(data1);

zzdjk6

const MyComponent: React.FC = () => {
  const data1 = useData1();
  const data2 = useData2(data1);
  const result = React.useMemo(() => {
    if (!data1 || !data2) {
      return null;
    }

    return aggregateData(data1, data2);
  }, [data1, data2]);

zzdjk6

const MyComponent: React.FC = () => {
  const data1 = useData1();
  if (!data1) {
    return null;
  }

  const data2 = useData2(data1);
  if (!data2) {
    return null;
  }

zzdjk6

const MyComponent: React.FC = () => {
  const { loading, error, data } = useData();

  if (loading) {
    return <Spinner />;
  }

  if (error) {
    return <Alert>{error.message}</Alert>;
  }

zzdjk6

type Props = {
  loading: boolean;
  error?: Error;
  data: Data;
};

const MyComponent: React.FC<Props> = (props) => {
  if (props.loading) {
    return <Spinner />;
  }

zzdjk6

function doSomething(user, data) {
  if (!hasPermission(user)) {
    throw new PermissionDeniedError();
  }

  if (!isNetworkAvailable()) {
    saveInQueue(user, data);
    return;
  }

zzdjk6

function doSomething(user, data) {
  if (hasPermission(user)) {
    if (isNetworkAvailable()) {
      if (isValid(data)) {
        sendToServer(user, data);
      } else {
        throw new DataInvalidError();
      }
    } else {
      saveInQueue(user, data);

zzdjk6

// Use a polyfill to make it useable in old browswers
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';

// When abort happens, this error will be throw
export class AbortError extends Error {
  constructor(message: string = 'Aborted') {
    super(message);
    this.name = 'AbortError';
  }
}