La principale raison d'écrire un crochet personnalisé est la réutilisabilité du code. Par exemple, au lieu d'écrire le même code sur plusieurs composants qui utilisent la même logique avec état commune (disons une logique "setState" ou localStorage), vous pouvez mettre ce code dans un crochet personnalisé et le réutiliser, je vais vous montrer comment implémenter quelques crochets personnalisés utiles.

utiliserPrécédent

Une question qui revient souvent est "Lorsque j'utilise des crochets, comment puis-je obtenir la valeur précédente des accessoires ou de l'état?" . Avec les composants de la classe React, vous avez la méthode componentDidUpdate qui reçoit les accessoires et l'état précédents en tant qu'arguments ou vous pouvez mettre à jour une variable d'instance (this.previous = valeur) et la référencer ultérieurement pour obtenir la valeur précédente. Alors, comment pouvons-nous faire cela à l'intérieur d'un composant fonctionnel qui n'a pas de méthodes de cycle de vie ou d'instance sur laquelle stocker les valeurs ? Crochets à la rescousse ! Nous pouvons créer un crochet personnalisé qui utilise le crochet useRef en interne pour stocker la valeur précédente. Voir la recette ci-dessous avec des commentaires en ligne.

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 crochet facile à utiliser setTimeout(callback, delay)et qui devrait :

1. Réinitialisez la minuterie si le délai change.
2. NE réinitialisez PAS la minuterie si seul le rappel change.

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. Les questions viennent dehttps://bigfrontend.dev/react
4. https://usehooks.com/usePrevious/

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

Merci d'avoir lu, si vous avez appris quelque chose de cet article, suivez-moi s'il vous plaît Je publierai plus de contenu sur React et Javascript.