rising-crimson

Keep a local state after fetching data

Whats the best way to create a local copy of data after fetching?

const { data } = useQuery();
const [localData, setLoacalData] = useState(data) // <-- need to use data here as we need to mutate them locally and after saving we want to refresh local state with new values

const { data } = useQuery();
const [localData, setLoacalData] = useState(data) // <-- need to use data here as we need to mutate them locally and after saving we want to refresh local state with new values

5 Replies

rising-crimsonOP•3y ago

@TkDodo 🔮 any best practices for this

unwilling-turquoise•3y ago

https://tkdodo.eu/blog/react-query-and-forms

React Query and Forms

Forms tend to blur the line between server and client state, so let's see how that plays together with React Query.

rising-crimsonOP•3y ago

thanks, it means we need another component to accept data as a prop right and inside this component we do local updates and finally doing mutation

unwilling-turquoise•3y ago

react-hook-form has async default values

wise-white•3y ago

This is also interesting: https://jotai.org/docs/integrations/query Jotai is a great global state management library, and its integration with React-Query is amazing.

Jotai

Query — Jotai, primitive and flexible state management for React

This doc describes TanStack Query integration.

Gaming

Programming

Keep a local state after fetching data

Did you find this page helpful?