Render-Optimierungen

TanStack Router enthält mehrere Optimierungen, um sicherzustellen, dass Ihre Komponenten nur dann neu gerendert werden, wenn es notwendig ist. Diese Optimierungen umfassen

TanStack Router verwendet eine Technik namens "strukturelles Teilen" (structural sharing), um so viele Referenzen wie möglich zwischen Neurenderings zu erhalten. Dies ist besonders nützlich für im URL gespeicherte Zustände, wie z. B. Suchparameter.

Betrachten Sie zum Beispiel eine Route details mit zwei Suchparametern, foo und bar, die wie folgt aufgerufen werden

const search = Route.useSearch()

const search = Route.useSearch()

Wenn nur bar durch die Navigation von /details?foo=f1&bar=b1 zu /details?foo=f1&bar=b2 geändert wird, bleibt search.foo referenziell stabil und nur search.bar wird ersetzt.

Sie können auf den Router-Zustand zugreifen und ihn über verschiedene Hooks abonnieren, wie z. B. useRouterState, useSearch und andere. Wenn Sie möchten, dass eine bestimmte Komponente nur dann neu gerendert wird, wenn sich ein bestimmter Teil des Router-Zustands, wie z. B. ein Teil der Suchparameter, ändert, können Sie Teilabonnements mit der Eigenschaft select verwenden.

// component won't re-render when `bar` changes
const foo = Route.useSearch({ select: ({ foo }) => foo })

// component won't re-render when `bar` changes
const foo = Route.useSearch({ select: ({ foo }) => foo })

Die Funktion select kann verschiedene Berechnungen am Router-Zustand durchführen, wodurch Sie unterschiedliche Werttypen, wie z. B. Objekte, zurückgeben können. Zum Beispiel

const result = Route.useSearch({
  select: (search) => {
    return {
      foo: search.foo,
      hello: `hello ${search.foo}`,
    }
  },
})

const result = Route.useSearch({
  select: (search) => {
    return {
      foo: search.foo,
      hello: `hello ${search.foo}`,
    }
  },
})

Obwohl dies funktioniert, wird Ihre Komponente jedes Mal neu gerendert, da select jedes Mal, wenn es aufgerufen wird, ein neues Objekt zurückgibt.

Sie können dieses Problem der Neurendering vermeiden, indem Sie "strukturelles Teilen" (structural sharing) wie oben beschrieben verwenden. Standardmäßig ist strukturelles Teilen zur Aufrechterhaltung der Abwärtskompatibilität deaktiviert, aber dies kann sich in v2 ändern.

Um strukturelles Teilen für feingranulare Selektoren zu aktivieren, haben Sie zwei Möglichkeiten

const router = createRouter({
  routeTree,
  defaultStructuralSharing: true,
})

const router = createRouter({
  routeTree,
  defaultStructuralSharing: true,
})

const result = Route.useSearch({
  select: (search) => {
    return {
      foo: search.foo,
      hello: `hello ${search.foo}`,
    }
  },
  structuralSharing: true,
})

const result = Route.useSearch({
  select: (search) => {
    return {
      foo: search.foo,
      hello: `hello ${search.foo}`,
    }
  },
  structuralSharing: true,
})

Entsprechend dem typsicheren Design von TanStack Router wird TypeScript einen Fehler ausgeben, wenn Sie Folgendes versuchen

const result = Route.useSearch({
  select: (search) => {
    return {
      date: new Date(),
    }
  },
  structuralSharing: true,
})

const result = Route.useSearch({
  select: (search) => {
    return {
      date: new Date(),
    }
  },
  structuralSharing: true,
})

Wenn strukturelles Teilen standardmäßig in den Router-Optionen aktiviert ist, können Sie diesen Fehler vermeiden, indem Sie structuralSharing: false setzen.