Make the impossible unrepresentable

isLoading, isError, data, error. That is sixteen combinations and you meant four: idle, loading, loaded with data, failed with an error. The other twelve, loading and errored at once, loaded with no data, errored with no error, are states your code can enter and your rendering has never considered.

A discriminated union collapses them: { status: "idle" } | { status: "loading" } | { status: "success", data: T } | { status: "error", error: E }. Now data exists only where it is meaningful, the compiler refuses to let you read it in the loading branch, and a switch over status can be checked for exhaustiveness so adding a fifth state produces errors everywhere it needs to be handled.

The technique generalises beyond fetch states. A form field that is either untouched, editing with a draft value, or committed. A subscription that is either inactive, trialling with an end date, or paid with a renewal date. Every time you find yourself writing "this field is only set when that other field is true", you have found a union waiting to be named.