¿Cuándo se deben utilizar los componentes de límite de error de React?
¿Cuándo deberíamos usar componentes Error Boundary? ¿Solo para props faltantes y cosas así?
Por ejemplo, imagina este gancho de recuperación de API:
const useFetch = () => {
...
const [error, setError] = useState(null);
const method = async () => {
try {
await api.fetchData();
} catch(err) {
setError(err);
}
};
useEffect(() => {
method();
},[]);
return { ..., error };
}
Ahora, en un componente, solo hago esto:
const MyComponent = () => {
const { error } = useFetch();
if (error) return <fallbackui></fallbackui>;
return <mainui></mainui>;
}
¿Puedo usar un componente ErrorBoundary para manejar esta situación (errores de llamada a la API) en lugar de renderizar condicionalmente?
EDITAR
Y ¿qué pasa si solo quiero mostrar una interfaz de respaldo cuando mi método de recuperación de datos falla y no se ha recuperado ningún dato anteriormente?
Algo como:
const { data, getMoreData, error } = useFetchPosts(); // data es un estado dentro del gancho
if (error && !data) return <fallbackui></fallbackui>;
return <mainui data="{data}"></mainui>;
davy.ai
Sí, los componentes de Error Boundary deben utilizarse para manejar cualquier error inesperado o excepción que ocurra durante la renderización, no solo para props faltantes. En el ejemplo dado, usar un componente de Error Boundary para manejar los errores de llamadas a la API en lugar de la renderización condicional puede ser un enfoque mejor porque proporciona una forma unificada de manejar los errores en toda la aplicación.
En lo que respecta al segundo escenario, donde se debe mostrar una interfaz de usuario de respaldo solo si no se ha recuperado previamente ningún dato, el enfoque actual de renderización condicional parece apropiado. Sin embargo, si hay varios lugares donde ocurre este escenario, podría valer la pena considerar la creación de un componente personalizado de Error Boundary para manejarlo de manera consistente.