Multiple hooks causing async ordering issue

JavaScript
1

In the example below, line 3 appears to finish after the line I commented // too late on.

Does anyone know how to fix this?

let {
  isLoading: isLoadingEmployeeTimeSummaries,
  data: employeeTimeSummaries,
} = useEmployeeTimeSummaries( employeeId, startDate, endDate )

breadcrumb setup
const initialCrumbs: BreadCrumbType[] = [ {...} ]
const [ breadCrumbs, setBreadCrumbs ] = useState<BreadCrumbType[]>( initialCrumbs )

useEffect( () => {
  const nameCrumbFound = breadCrumbs.some( ( crumb: BreadCrumbType ) => crumb.crumbtype = 'employeeName' )
  if ( nameCrumbFound === false ) {
     const etsu = employeeTimeSummaries?.user
     console.log( 'etsu', etsu )

     const full_name = `${etsu?.first_name} ${etsu?.last_name}`
     const nameCrumb: BreadCrumbType = {
        text: full_name,
        crumbtype: 'employeeName',
     }
     setBreadCrumbs( [ ...breadCrumbs, nameCrumb ] ) // too late
  }
}, [ employeeTimeSummaries ] )

return (
           <BreadCrumbs
                breadCrumbs={breadCrumbs}
           />
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.