Hooks

Jutro macht Hooks verfügbar, die Sie in verschiedenen Fällen verwenden können. Wenn Sie sie verwenden, stellen Sie sicher, dass Sie die offiziellen Regeln für React-Hooks befolgen.

Die Hooks können Sie aus @jutro/platform importieren, zum Beispiel:

import { useCombinedRefs } from '@jutro/platform';

useAccessibleRef

Ermöglicht die Barrierefreiheit für DOM-Nodes. Beinhaltet die Verarbeitung des nativen Fokus und die Reaktion auf „Enter“- und „Space“-Tastaturereignisse auf die gleiche Weise wie auf Mausklicks.

Parameter:

• focused: Wenn true, ist das Element beim Rendern aktiv.

Rückgabe: React.MutableRefObject<T>. React-Referenz, die an den A11Y-aktivierten Nodes angefügt werden soll.

useCombinedRefs

Macht aus mehreren Referenzen eine einzelne Referenz. Verwenden Sie sie, wenn Sie forwardRef und eine ref-Komponente für dasselbe Element benötigen

Parameter:

• refs: Ein Array von zu kombinierenden React-Referenzen.

useControlled

Verwaltet den Zustand für kontrollierte und unkontrollierte Komponenten.

Parameter:

• Wenn ein Wert übergeben wird (kontrollierte Komponente), gibt er nichts vom Hook zurück. In diesem Fall führt die Funktion setState keine Aktion aus.
• Wenn kein Wert übergeben wird (unkontrollierte Komponente), wird der interne Zustand der Komponente wie bei useState beibehalten.

Rückgabe: Das gleiche Tupel wie bei useState.

const [value, setValue] = useControlled({
  value: valueProp,
  defaultValue: null,
}); // controlled component

useDebounce

Gibt einen entprellten Wert zurück, der den letzten Wert für den angegebenen Zeitraum darstellt.

Parameter:

• value: der zu entprellende Wert
• delay: Zeitspanne, die gewartet wird, bevor der Zustand aktualisiert wird

Rückgabe: Der entprellte Wert.

const searchDebounced = useDebounce(search, 300);

useDeepEffect

Ein useEffect-Hook, der einen Tiefenvergleich der Abhängigkeiten durchführt. DOM-Elemente, Funktionen usw. werden weiterhin nach Identität verglichen (siehe isEqual von Lodash).

Parameter:

• effect: Die effect-Funktion.
• dependencies: Ein Array von Abhängigkeiten. Sie werden intensiv miteinander verglichen.

useDeepEffect(() => {
  if (!Array.isArray(value) && value) {
    const { latitude, longitude, country } = value;
    // This is triggered when any of the fields of "value" are changed
  }
}, [value]);

useDeepMemo

Ein useMemo-Hook, der einen Tiefenvergleich der Abhängigkeiten durchführt. DOM-Elemente, Funktionen usw. werden weiterhin nach Identität verglichen (siehe isEqual von Lodash).

Parameter:

• factory: Eine factory-Funktion, genau wie in useMemo.
• param-Abhängigkeiten: Ein Array von Abhängigkeiten. Sie werden intensiv miteinander verglichen.

Rückgabe: Der von der factory-Funktion zurückgegebene Wert.

useDeepMemoize

Speichert einen Wert, um seine Identität über Neurenderings hinweg zu bewahren. Ein neuer Wert wird nur dann zurückgegeben, wenn er nicht tiefengleich mit dem vorherigen ist. DOM-Elemente, Funktionen usw. werden weiterhin nach Identität verglichen (siehe isEqual von Lodash).

Parameter:

• value: Der zu memoisierende Wert.

Rückgabe: Der memoisierte Wert.

useId

Gibt eine ID zurück. Nützlich bei DOM-Elementen.

Parameter:

Es gibt nur einen Parameter, ein Objekt mit den folgenden Feldern:

• prefix: Ein Präfix, das der ID vorangestellt wird.
• default: Gibt „default“ unverändert zurück, ohne zusätzliche Generierung. „prefix“ hat Vorrang vor „default“.

const id = useId({ default: idProp });

useIsMounted

Überprüft, ob die Komponente gemountet ist. Während der ersten Renderphase (Funktionskörper) wird nicht gemountet.

Gibt React.RefObject<boolean> zurück. Dies gibt an, ob die Komponente gemountet ist.

useKeyActive

Prüft, ob eine Taste aktiv ist.

Parameter:

• ref für den Node, der als Scope für das Ereignis dienen soll.
• targetKeys: Ein Array von Zeichenfolgen, die die zu prüfenden Tasten angeben. Standardmäßig sind Enter und Space enthalten. Weitere Informationen finden Sie unter Schlüssel und Code.

const isActiveKeyPressed = useKeyActive(refOne); // track Enter and space
const isActiveKeyPressed = useKeyActive(refTwo, ['Shift']); // track only Shift

useKeyPress

Ermöglicht eine einfachere Verarbeitung von Tastaturereignissen.

Parameter:

• ref für den Node, der als Scope für das Ereignis dienen soll.
• targetKeys: Ein Array von Zeichenfolgen, die die zu prüfenden Tasten angeben.
• callback: Callback zur Verarbeitung von keydown/keyup-Ereignissen.

useKeyPress(ref, ['Space', 'Enter'], handleKey);

usePathname

Gibt den aktuellen history.location.pathname zurück.

Wir versuchen, useLocation nicht zu verwenden, da dadurch der Schlüssel geändert wird, auch wenn der Pfad unverändert bleibt, was zu unerwünschtem Rendern führt.

Dieser Hook ist auf Pfadänderungen ausgerichtet.

usePrevious

Ruft den vorherigen Wert eines als Parameter übergebenen Eigenschafts- oder Zustandsobjekts ab (siehe How to get the previous props or state?).

Parameter:

• value: Der aktuelle Wert, der für die nächste Verwendung des Hooks gespeichert wird.

Rückgabe: Der vorherige Wert für das als Parameter übergebene Referenzobjekt.