Avoiding useEffect when data changes

How would you handle data from the server changing, based upon which local state should change too?
The code below "works" but I would like to avoid useEffect, since I feel like it isn't really the right tool for what I want.
So what is the general pattern for how to make changes in server side data affect client side state?

const useMyCustomHook = (txId: string) => {
  const { data: transaction } = useQuery({
    queryKey: ['transactionDetails', txId],
    queryFn: getTransactionDetails,
  })
  const currentFeeRate = transaction ? getTransactionFeeRate(transaction) : 1
  const [newFeeRate, setNewFeeRate] = useState(String(currentFeeRate))

  useEffect(() => {
    setNewFeeRate(String(currentFeeRate + 1))
  }, [currentFeeRate])

  return setNewFeeRate
}

const useMyCustomHook = (txId: string) => {
  const { data: transaction } = useQuery({
    queryKey: ['transactionDetails', txId],
    queryFn: getTransactionDetails,
  })
  const currentFeeRate = transaction ? getTransactionFeeRate(transaction) : 1
  const [newFeeRate, setNewFeeRate] = useState(String(currentFeeRate))

  useEffect(() => {
    setNewFeeRate(String(currentFeeRate + 1))
  }, [currentFeeRate])

  return setNewFeeRate
}

In other words: I have a derived value from the cache that should be able to change on the client side and optionally the user has a post button to update the server side data.

TanStack•3y ago•

12 replies

moderate-tomato

Avoiding useEffect when data changes

const useMyCustomHook = (txId: string) => {
  const { data: transaction } = useQuery({
    queryKey: ['transactionDetails', txId],
    queryFn: getTransactionDetails,
  })
  const currentFeeRate = transaction ? getTransactionFeeRate(transaction) : 1
  const [newFeeRate, setNewFeeRate] = useState(String(currentFeeRate))

  useEffect(() => {
    setNewFeeRate(String(currentFeeRate + 1))
  }, [currentFeeRate])

  return setNewFeeRate
}

const useMyCustomHook = (txId: string) => {
  const { data: transaction } = useQuery({
    queryKey: ['transactionDetails', txId],
    queryFn: getTransactionDetails,
  })
  const currentFeeRate = transaction ? getTransactionFeeRate(transaction) : 1
  const [newFeeRate, setNewFeeRate] = useState(String(currentFeeRate))

  useEffect(() => {
    setNewFeeRate(String(currentFeeRate + 1))
  }, [currentFeeRate])

  return setNewFeeRate
}

In other words: I have a derived value from the cache that should be able to change on the client side and optionally the user has a post button to update the server side data.

Avoiding useEffect when data changes

Similar Threads

Avoiding useEffect when data changes

Similar Threads

Similar Threads

Similar Threads