I have a simple issue I want to rectify. I’m using react query and what I want is my app to render as soon as the query is called and then once its complete.

However, if I have a state called “date”. When I update date, it re-renders unnecessarily. When I use a useRef in the react query depencency array, it doesnt get triggered. Only gets triggered if its a usestate. Whats the best way to accomplish this?

This triggers multiple renders BUT api is called accordingly:

    const [date, setDate] = useState("");
    const {
        data,
        isLoading
    } = useQuery({
        queryKey: ["chat", date],
        queryFn: () => getChat(date),
    });

This does not trigger API when date is changed, but I would assume changing date would not trigger a rerender:

    const date = useRef("");
    const {
        data,
        isLoading
    } = useQuery({
        queryKey: ["chat", date.current],
        queryFn: () => getChat(date.current),
    });