without this change, i get a method-unbinding error from flow. if i understand correctly, arrow functions don't have their own this context so the method maintains its binding to the original object, even when it's passed around or detached from its context

Using <br /> is an anti-pattern. Instead, you should wrap each part in a <p>. You may need to apply some CSS to make it look the way you want to

Actually, we should avoid including the <p> if the error message is empty

const keyserverError = keyserverErrorMessage
  ? <p>{keyserverErrorMessage}</p>
  : null;
const identityError = identityErrorMessage
  ? <p>{identityErrorMessage}</p>
  : null;
....
        <div className={css.form_error}>
          {keyserverError}
          {identityError}
        </div>

i think we only want to call popModal if both deleteKeyserverAction and deleteIdentityAction succeed

followed the example @tomek linked, but wondering if this would be more idiomatic

identityServiceClient cannot be null when we call useDeleteIdentityAccount()

No, you don't want to do this in an effect... then identityServiceClientWrapperRef.current won't be set on the first render

I don't understand why you need line 55. const identityServiceClient = identityServiceClientWrapperRef.current should not be nullable... is Flow giving you issues? If so, try an invariant

but wondering if this would be more idiomatic

It seems like the API of ref is different than the state's, which is surprising. But to make it simpler, we can introduce our hook which exposes a more flexible API. Created a task where we can introduce it. https://linear.app/comm/issue/ENG-6401/introduce-a-hook-that-works-like-useref-and-allows-being-initialized

We can make this even better by introducing a context and moving the auth API to it. Created a task tracing it https://linear.app/comm/issue/ENG-6404/move-identity-client-to-a-context.