Ganchos

Jutro expone ganchos que puede usar en diferentes casos. Al usarlos, asegúrese de seguir las reglas oficiales para los ganchos de React.

Puede importar estos ganchos desde @jutro/platform, por ejemplo:

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

useAccessibleRef

Habilita la accesibilidad en los nodos DOM. Incluye el manejo del foco nativo y la reacción a los eventos del teclado “Intro” y “barra espaciadora” de la misma manera que a los clics del mouse.

Parámetros:

• focused: Si es true, el elemento está activo en el renderizado

Devuelve un React.MutableRefObject<T>, referencia de React que debe adjuntarse al nodo habilitado para a11y.

useCombinedRefs

Crea una sola referencia a partir de varias. Utilícelo si necesita tanto forwardRef como un componente ref para el mismo elemento.

Parámetros:

• refs: Una matriz de referencias de React para combinar.

useControlled

Maneja el estado de los componentes controlados y no controlados.

Parámetros:

• Si se pasa un valor (componente controlado), no devuelve nada del gancho. La función setState no hace nada en ese caso.
• Si no se pasa ningún valor (componente no controlado), funciona igual que useState y mantiene el estado interno del componente.

Devuelve la misma tupla que useState.

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

useDebounce

Devuelve un valor de función debounce que refleja el valor más reciente para el período de tiempo especificado.

Parámetros:

• value: El valor que se debe someter a debounce
• delay: Período de tiempo que se debe esperar antes de actualizar el estado

Devuelve el valor de debounce.

const searchDebounced = useDebounce(search, 300);

useDeepEffect

Es un useEffect que compara en profundidad sus dependencias. Los elementos DOM, funciones, etc., todavía se comparan por identidad (consulte isEqual de lodash).

Parámetros:

• effect: La función efecto.
• dependencies: Una matriz de dependencias. Son comparadas en profundidad.

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

Es un useMemo que compara en profundidad sus dependencias. Los elementos DOM, funciones, etc., todavía se comparan por identidad (consulte isEqual de lodash).

Parámetros:

• factory: Una función de fábrica, exactamente igual que en useMemo.
• Dependencias param: Una matriz de dependencias. Son comparadas en profundidad.

Devuelve el valor devuelto por la función de fábrica.

useDeepMemoize

Memoiza un valor para preservar su identidad en todos los rerenderizados. Se devuelve un nuevo valor solo si no es igual en profundidad al anterior. Los elementos DOM, funciones, etc. todavía se comparan por identidad (consulte isEqual de lodash).

Parámetros:

• value: El valor que se memoizará.

Devuelve el valor memoizado.

useId

Devuelve un ID. Es útil en elementos DOM.

Parámetros:

Solo hay un parámetro, un objeto con los siguientes campos:

• prefix: Un prefijo que se antepone al ID.
• default: Devuelve los valores predeterminados tal cual, sin ninguna generación adicional. El prefijo tiene prioridad sobre el predeterminado.

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

useIsMounted

Comprueba si el componente está montado. Durante la primera fase de renderizado (cuerpo de la función), no se monta.

Devuelve un React.RefObject<boolean> que indica si el componente está montado.

useKeyActive

Rastrea si una clave está activa.

Parámetros:

• ref al nodo, que debe servir como ámbito para el evento
• targetKeys: Una matriz de strings que indica las teclas que se deben rastrear. De forma predeterminada, incluye Enter y Space. Como referencia, consulte clave y código.

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

useKeyPress

Permite un manejo más sencillo de los eventos de teclado.

Parámetros:

• ref al nodo, que debe servir como ámbito para el evento
• targetKeys: Una matriz de strings que indica las teclas que se deben rastrear.
• callback: Devolución de llamada para manejar eventos de tecla presionada o sin presionar.

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

usePathname

Devuelve el history.location.pathname actual.

Estamos tratando de evitar useLocation porque cambia la clave incluso si la ruta es la misma, lo que provoca renderizaciones no deseadas.

Si solo le importan los cambios de ruta, este gancho se centra en ellos.

usePrevious

Obtiene el valor anterior de un objeto de propiedades o un objeto de estado pasado como parámetro (consulte ¿Cómo obtener las propiedades o el estado anteriores?).

Parámetros:

• value: El valor actual que se almacenará para el próximo uso del gancho

Devuelve el valor anterior para el objeto de referencia pasado como param.