Best practice using search params as state

reacttypescript

I noticed when deriving state using

Route.useSearch()

Route.useSearch()

, and updating state using

Route.useNavigate

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

useState

, and syncing state using a

useEffect

useEffect

eg:

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;
}

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;
}

TanStack•3w ago•

6 replies

cold-orange

Best practice using search params as state

reacttypescript

I noticed when deriving state using

Route.useSearch()

Route.useSearch()

, and updating state using

Route.useNavigate

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

useState

, and syncing state using a

useEffect

useEffect

eg:

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;
}

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;
}

Best practice using search params as state

Similar Threads

Best practice using search params as state

Similar Threads

Similar Threads

Similar Threads