Error: Rendered more hooks than during the previous render.

[NicolasCassunde]

function useIndicator() {
  const params = useParams<{token: string, chart: string}>()
  const {data} = useQuery({
    queryKey: ['indicator'],
    queryFn: async () => {
      const res = await fetch("http://localhost:3000/api/assets/" + params.token)
      const data = await res.json() as AssetsModel[]

      const ind = data.map((i) => i.categories.map((c) => c.subcategories.map((w) => w.indicators.find((ind => ind.short_name === params.chart)))))[0][0]

      return ind[0]
    }
  })
  return data
}
function usePrice() {
  const {data} = useQuery({
    queryKey: ['price'],
    queryFn: async () => {
      const res = await fetch("http://localhost:3000/api/price?symbol=BTCUSDT&r=1d")
      const data = await res.json()

      return data
    }
  })
  return data
}

export function createChartFactory(urlSearchParams: URLSearchParams) {
  const indicator = useIndicator()

  if(!indicator) return null

  const price = usePrice()

  return {
    indicator,
    price
  }
}

[badams]

const indicator = useIndicator()
const price = usePrice()

if(!indicator) return null

You need to ensure all your hooks run every render, so move the usePrice call above the return null

https://react.dev/warnings/invalid-hook-call-warning