Using react-effect for Result pattern matching in a Test component

export default function Test() {
  const { match, result, load } = useResultFetcher(Routes.Login, { loadOnMount: true });

  return (
    <div>
      <div>
        <button onClick={load}>Load again</button>
      </div>
      {pipe(
        result,
        match({
          Initial: () => <div>Loading for the first time...</div>, // fetching for the first time
          Refreshing: ({ value }) => <div>Refreshing: {value}</div>, // refetching after the previous fetch was a success
          Retrying: ({ cause }) => <div>Retrying: {cause.toString()}</div>, // refetching after the previous fetch was a failure 
          Success: ({ value }) => <div>Success: {value}</div>, // fetching was a success
          Failure: ({ cause }) => <div>Error: {cause.toString()}</div> // fetching was a failure
        })
      )}
    </div>
  );
}