Avoiding delay when using search params as state [closed]

I noticed when deriving state using Route.useSearch(), and updating state using Route.useNavigate, there is a delay when updating state. Is there guidance on how to do this optimally? So far I'm keeping state in a useState, and syncing state using a useEffect

function useOptimisticTab() { const { tab } = Route.useSearch(); const navigate = Route.useNavigate(); const [optimisticTab, setOptimisticTab] = useState(tab); useEffect(() => { setOptimisticTab(tab); }, [tab]); const handleSetOptimisticTab = (value: TabOptions) => { setOptimisticTab(value); navigate({ search: (prev) => ({ ...prev, tab: value, }), }); }; return [optimisticTab, handleSetOptimisticTab] as const; }