I have one query call which returns me the data and also I am using await as well.
const {data, isLoading } = useQuery('getData', queryFunc);
here ,
I am trying to use it here
<div>
{ data?.addition?.isEnabled && <Notification> }
</div>
Here, for fraction of second the Notification component is getting rendered., and after 1-2 second once response comes then the component is rendered.
Is there any specific reason for this? also How do I fix this ?
I fixed this like { data && data?.addition?.isEnabled && <Notification> }
can any one help me with this?
In React undefined and false values are not rendered. Since the data you're getting is from an async function the notifications component will be rendered briefly until initialized and then removed. You can maybe use a useCallback hook to fix this behavior but without seeing more of the code I'm not sure on what to do. Usage of useCallback is like so:
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]);