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>

`setState` will not change the state immediately but only after all methods have completed. Thus logging it won't show the updated value, though you can use it in your next render — mousetail, Apr 08 '21 at 09:45
sure, do understand so what should I use If I want current value before rendering ? — K.Z, Apr 08 '21 at 09:47
What exactly do you want to do with the value? You can use `event.value` immediately if you don't want to wait for the state to update — mousetail, Apr 08 '21 at 09:48
I want to store recently change value in react hook without rendering — K.Z, Apr 08 '21 at 09:56
Does your `handleSearchCriteriaUpdate` function use updated value of `siteCoverStatus`. Can your share its implementation — Shubham Khatri, Apr 08 '21 at 09:57

score 1 · Accepted Answer · answered Apr 08 '21 at 10:32

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>

React UseState resolve current value after rendering

1 Answers1