Quand je clique sur ajouter aux favoris (ajouter au stockage local mais pas mettre à jour le décompte, lorsque je clique sur le bouton ref, le décompte est mis à jour, je fais ça pour mon projet e-commerce, j'ai une liste de souhaits. Quand J'ajoute l'article Lors de l'ajout à la liste de souhaits, j'ajoute des articles au stockage local et je dois afficher le nombre d'articles que j'ai ajoutés à la liste de souhaits. Je ne sais pas comment afficher automatiquement l'en-tête lorsque la valeur (stockage local) change.

J'ai ajouté un bouton qui appelle cou via onClick. Quand j'ajoute l'article à la wishlist rien ne se passe (pas de rendu) et quand je clique sur le bouton tout va bien. Quelqu'un peut-il m'aider ? Tout est sur le composant d'en-tête (page)

const [count, setCount] = useState((JSON.parse(localStorage.getItem("liked"))));


  const cou = () => {
    let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
    if (oldData.length === count.length) {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    } else {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    }
  };

  useEffect(() => {
    let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
    if (oldData.length === count.length) {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    } else {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    }
  }, [(count.length)]);

C'est la durée sur l'en-tête

<span style={{ position: 'relative', left: '-21px', top: '-18px' }}>{count.length}</span>