La razón principal para escribir un enlace personalizado es la reutilización del código. Por ejemplo, en lugar de escribir el mismo código en varios componentes que usan la misma lógica con estado común (por ejemplo, una lógica "setState" o localStorage), puede colocar ese código dentro de un gancho personalizado y reutilizarlo. Le mostraré cómo implementar algunos ganchos personalizados útiles.

usarAnterior

Una pregunta que surge con frecuencia es "Al usar ganchos, ¿cómo obtengo el valor anterior de los accesorios o el estado?" . Con los componentes de la clase React, tiene el método componentDidUpdate que recibe accesorios y estados anteriores como argumentos o puede actualizar una variable de instancia (this.previous = value) y consultarla más tarde para obtener el valor anterior. Entonces, ¿cómo podemos hacer esto dentro de un componente funcional que no tiene métodos de ciclo de vida o una instancia para almacenar valores? ¡Ganchos al rescate! Podemos crear un gancho personalizado que use el gancho useRef internamente para almacenar el valor anterior. Vea la receta a continuación con comentarios en línea.

import { useRef, useEffect } from "react";

export function usePrevious<T>(value: T): T | undefined {
  /* The ref object is a generic container whose current property is mutable
  and can hold any value, similar to an instance property on a class */
  const ref = useRef();

  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes

  // Return previous value (happens before update in useEffect above)
  return ref.current;
}

// Ref: https://usehooks.com/usePrevious/

import React, { useState } from "react";

const prices = [100, 200, 300, 400, 500, 600, 700];

const Price = ({ price }) => {
  const prevPrice = usePrevious(price);
  const icon = prevPrice && prevPrice < price ? '' : '';

  return (
    <div>
      Current price: {price}; <br />
      Previous price: {prevPrice} {icon}
    </div>
  );
};

const Page = () => {
  const [price, setPrice] = useState(100);

  const onPriceChange = (e) => setPrice(Number(e.target.value));

  return (
    <>
      <select value={price} onChange={onPriceChange}>
        {prices.map((price) => (<option value={price}>{price}$</option>))}
      </select>
      <Price price={price} />
    </>
  );
}

Un gancho para usar fácilmente setTimeout(callback, delay)y debe:

1. Restablezca el temporizador si cambia el retraso.
2. NO reinicie el temporizador si solo cambia la devolución de llamada.

export function useTimeout(callback: () => void, delay: number) {
  const callbackFn = React.useRef(null)
  callbackFn.current = callback

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (callbackFn.current) {
        callbackFn.current()
      }
    }, delay)

    return () => {
      clearTimeout(timeoutId)
    }
  }, [delay]) // Only re-run if delay changes
}

import { useState } from 'react'

export default function Component() {
  const [visible, setVisible] = useState(true)

  const hide = () => setVisible(false)

  useTimeout(hide, 5000)

  return (
    <div>
      <p>
        {visible
          ? "I'm visible for 5000ms"
          : 'You can no longer see this content'}
      </p>
    </div>
  )
}

3. Las preguntas son dehttps://bigfrontend.dev/react
4. https://usehooks.com/usePrevious/

https:///@lama.ibrahim96/whats-the-difference-between-for-in-and-object-keys-6d872a3d526a

Gracias por leer, si aprendiste algo de este artículo, sígueme Publicaré más contenido sobre React y Javascript.