Tengo una llamada de consulta que me devuelve los datos y también estoy usando await.
const {data, isLoading } = useQuery('getData', queryFunc);aquí ,
Estoy tratando de usarlo aquí
<div> { data?.addition?.isEnabled && <Notification> } </div>Aquí, por una fracción de segundo, el componente de Notificación se procesa, y después de 1-2 segundos, una vez que llega la respuesta, el componente se procesa.
¿Hay alguna razón específica para esto? también ¿Cómo soluciono esto?
I fixed this like { data && data?.addition?.isEnabled && <Notification> }¿Puede alguien ayudarme con esto?
En React, los valores indefinidos y falsos no se representan. Dado que los datos que obtiene provienen de una función asíncrona, el componente de notificaciones se procesará brevemente hasta que se inicialice y luego se elimine. Tal vez pueda usar un enlace useCallback para corregir este comportamiento, pero sin ver más del código, no estoy seguro de qué hacer. El uso de useCallback es así:
const foo = useCallback(() => { //you can pass parameters here when calling like this foo(arg1,arg2) //do something expensive in resources... //this will re-render when done. return bar; },[//dependencies go here]); //use with useEffect hook if you want this to render on load like so: useEffect(() => { foo(); },[foo]);