Graphql-codegen nested fragment use inside a React component

The nested fragment regularUserResponseFragmentDocument

import { graphql } from '../../generated/graphql';

export const regularErrorFragmentDocument = graphql(`
  fragment regularError on FieldError {
    field
    message
  }
`);

export const regularUserFragmentDocument = graphql(`
  fragment regularUser on User {
    id
    username
  }
`);

export const regularUserResponseFragmentDocument = graphql(`
  fragment regularUserResponse on UserResponse {
    errors {
      ...regularError
    }
    user {
      ...regularUser
    }
  }
`);

is used in a component like so:

if (response.data?.login) {
  const data = useFragment(regularUserResponseFragmentDocument, response.data.login);
  const errorsData = useFragment(regularErrorFragmentDocument, data.errors);
  if (errorsData) {
    setErrors(toErrorMap([...errorsData]));
  }
  const userData = useFragment(regularUserFragmentDocument, data.user);
  if (userData) {
    await router.push('/');
  }
}

Is there a way to avoid use of useFragment on the nested fragments?

No there is not; this is the proper way to get nested masked fragments. You will find a similar example here where useFragment() was renamed to getFragmentData() (from codegen config) to avoid React hooks rules issues: https://github.com/charlypoly/codegen-repros/blob/master/client-preset-nested-fragments-interface/src/App.tsx