40 replies

Should I use setState inside useEffect with React Query (or TRPC)?

Lets say I want to fetch a product and set the result to a zustand store.

//Get zustand store setter
const { setSelectedProduct } = useCustomerTransactionStore();

//Using TRPC 
const { isLoading, isError, error, data:productData } = api.product.getById.useQuery({ productId: 5 })

//Get zustand store setter
const { setSelectedProduct } = useCustomerTransactionStore();

//Using TRPC 
const { isLoading, isError, error, data:productData } = api.product.getById.useQuery({ productId: 5 })

Since tkdodo mentions we shouldn't be using onSuccess (it will be deprecated fully soon), is the only approach to just add:

useEffect(() => {
  setSelectedProduct(productData)
}, [productData])

useEffect(() => {
  setSelectedProduct(productData)
}, [productData])

Is there a better way to approach this?

TkDodo article:
https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

TTC

Theo's Typesafe Cult•3y ago•

40 replies

juanvilladev

Should I use setState inside useEffect with React Query (or TRPC)?

Lets say I want to fetch a product and set the result to a zustand store.

//Get zustand store setter
const { setSelectedProduct } = useCustomerTransactionStore();

//Using TRPC 
const { isLoading, isError, error, data:productData } = api.product.getById.useQuery({ productId: 5 })

//Get zustand store setter
const { setSelectedProduct } = useCustomerTransactionStore();

//Using TRPC 
const { isLoading, isError, error, data:productData } = api.product.getById.useQuery({ productId: 5 })

Since tkdodo mentions we shouldn't be using onSuccess (it will be deprecated fully soon), is the only approach to just add:

useEffect(() => {
  setSelectedProduct(productData)
}, [productData])

useEffect(() => {
  setSelectedProduct(productData)
}, [productData])

Is there a better way to approach this?

TkDodo article:
https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

Should I use setState inside useEffect with React Query (or TRPC)?

Similar Threads

Should I use setState inside useEffect with React Query (or TRPC)?

Similar Threads

Similar Threads

Similar Threads