React UseState resolve current value after rendering

Question

I am getting currently assigned value to useState const after rendering. I have initialize const value in useEffect but still unable to get result.

I have dropdown from where I am capturing event and set new value for the useState, followed by call API to get data. I want current data to useState soon I change value in dropdown?

I have followed this answer useState set method not reflecting change immediately but not getting anywhere, not sure what I am missing from the puzzle?

const XYZ = () => {
const [siteCoverStatus, setSiteCoverStatus] = useState("ALL");


useEffect(() =>{
 setDefaultSearchCriteria();
 },[setSiteCoverStatus, setEziSearchCriteria]);


const handleCoverStatusFilter = (event) =>{
 if(event!=null){
   setSiteCoverStatus(event.value)

   console.log("cover status new val ==", event.value );
   console.log("cover status siteCoverStatus ==", siteCoverStatus);
   handleSearchCriteriaUpdate();
 }
}

const handleSearchCriteriaUpdate = () =>{
 var criteria : IEziStatusSearchCriteriaForm = {
  startTime: startDate.toLocaleDateString(),    
  endTime:  endDate.toLocaleDateString(),       
  schedAction_Active: recordSchedAction,
  isActive: siteActiveStatus,
  queryKeyword: search,
  coverStatus: siteCoverStatus,
  siteId: fiteredSiteId,
  managerId: filteredManagerId
 }

 setEziSearchCriteria(criteria);

 var keyValue = criteria.startTime+criteria.endTime+criteria.schedAction_Active+criteria.isActive+criteria.coverStatus+criteria.queryKeyword+criteria.siteId+criteria.managerId;
 setAppSwtichKey(keyValue);
 }


  <div className= "input-child-block input-block">
     <Select 
       options={eziSitesStatusCovers}
       onChange = {handleCoverStatusFilter}
       isClearable={true} 
       placeholder={siteCoverStatus}
     />
  </div> 

Answer 1

Since handleSearchCriteria depends on the updated state siteCoverStatus, you can call it in useEffect with dependency as siteCoverStatus.

Also since you want to clear searchCriteria when all processing is done, you can do that once you update eziSearchCriteria.

const XYZ = () => {

    const [siteCoverStatus, setSiteCoverStatus] = useState("ALL");
    
    
    useEffect(() =>{
     setDefaultSearchCriteria();
     },[eziSearchCriteria]);

   useEffect(() => {

      if(siteCoverStatus) {
          handleSearchCriteriaUpdate();
      }

   }, [siteCoverStatus])
    
    const handleCoverStatusFilter = (event) =>{
     if(event!=null){
       setSiteCoverStatus(event.value)
     }
    }
    
    const handleSearchCriteriaUpdate = () =>{
     var criteria : IEziStatusSearchCriteriaForm = {
      startTime: startDate.toLocaleDateString(),    
      endTime:  endDate.toLocaleDateString(),       
      schedAction_Active: recordSchedAction,
      isActive: siteActiveStatus,
      queryKeyword: search,
      coverStatus: siteCoverStatus,
      siteId: fiteredSiteId,
      managerId: filteredManagerId
     }
    
     setEziSearchCriteria(criteria);
    
     var keyValue = criteria.startTime+criteria.endTime+criteria.schedAction_Active+criteria.isActive+criteria.coverStatus+criteria.queryKeyword+criteria.siteId+criteria.managerId;
     setAppSwtichKey(keyValue);
  }

  <div className= "input-child-block input-block">
     <Select 
       options={eziSitesStatusCovers}
       onChange = {handleCoverStatusFilter}
       isClearable={true} 
       placeholder={siteCoverStatus}
     />
  </div>