Как обязательно обработать ошибку с помощью реагирующего запроса?

Поскольку этот ответный запрос в значительной степени основан на подходе декларативный, обработка ошибок, которую я вижу во всех примерах, выглядит примерно так:

function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {//If there is an error, render different JSX
     return <span>Error: {error.message}</span>
   } 
   
   return (
     <ul>
       {data.map(todo => (
         <li key = {todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

Но что, если я хочу просто показать предупреждение в случае ошибки? Или, возможно, я использую какой-то интерфейс обработки ошибок с императивным триггером? Что-то вроде этого:

if (isError) alert(`An error has occurred: ${error.message}`)

В этом случае я получаю два предупреждения. Что-то вызывает повторный рендеринг компонента, что, конечно же, приводит к «дублирующейся» обработке ошибок.

Почему это важно для меня? Потому что моя логика обработки ошибок может быть основана не на рендеринге какого-то конкретного JSX в моем компоненте, а на каком-то ручном одноразовом триггере. Предупреждение — это просто базовый пример.

Любые предложения будут с благодарностью!