This question may be duplicate. But i didn’t find any solution hence posting it.
I have a screen. In useEffect i am calling api before that i am setting loader to true using useState but loader shows after delay of 1-2 sec.
how can i avoid delay. is there any other way?

here is sample code

import * as React from "react";
import {useState, useEffect} from 'react'
import {getBookList, bookListPayload} from '../../api/action';

const FavouriteScreen = ({navigation}) => {
 const getBookList_ = async (page,pageSize) =>{

    const resp = await getBookList()
    if(resp['status'] == 'success') {
      setBookList((state) => {
        return [...state, ...resp['data']]
      })
      
    }
  }
  useEffect(()=>{
    const get = async () =>{
      setLoading(true)
      setBookList([])
      await Promise.all([await getBookList_(page, pageSize)])
      setLoading(false)
    }
    const unsubscribe = navigation.addListener('focus', () => {
      get()
    });

    return unsubscribe;
  },[navigation])
  if(loading) {
    return <BusyIndicator title_text={screen_name} onlytitle={true} />
  }
  //design code
  return (
    <> </>  
  )
}