#Context Estoy creando un memory game los

1 messages · Page 1 of 1 (latest)

dawn iris
#

part 2 👇

# 
  useEffect(() => {
    getCards();
    if (choiseOne && choiseTwo) {
      if (choiseOne.image === choiseTwo.image) {
        setMatchedPairs([...matchedPairs, choiseOne.id, choiseTwo.id]);
        setFlippedCards([]);
        resetChoise();
      } else {
        setTimeout(() => {
          choiseOne.flipped = false;
          choiseTwo.flipped = false;
          setFlippedCards([]);
          resetChoise();
        }, 800);
      }
    }
    if (matchedPairs.length === 16) {
      onMatchFinished(true);
    }
  }, [choiseOne, choiseTwo, matchedPairs, onMatchFinished]);

  const resetChoise = () => {
    setChoiseOne(null);
    setChoiseTwo(null);
  };

  const getCards = async () => {
    const { data } = await supabase.from("cards").select(`
    *,
    languages (
      *
      )
      `);
    setCardData(data);
  };

  //This is not possible because breaking one of hooks rules
// native.length > 0 && learn.length > 0
 //  ? setCard(useShuffle(cardData))
   //: console.log("Waiting");

  return (
    <>
      <section className="p-10 gap-x-4 gap-y-4  overflow-hidden grid grid-cols-4 justify-items-center content-center ">
        {/*cards.length > 0 ? (
          cards.map((pair: CardInfo, index: number) => (
            <CardComponent
              key={index}
              id={pair.id}
              word={pair.word}
              image={pair.image}
              flipped={pair.flipped}
              matched={pair.matched}
              onClick={() => handleCardClick(pair)}
            />
          ))
        ) : (
          <span className="text-[#ffffff]">loading</span>
        ) */}
      </section>
    </>
  );
};

export { CardsComponent };
#

custom hook:

import { useEffect, useState } from "react";
import { CardInfo } from "../models/card.model";

const useShuffle = (array:CardInfo[]) => {
  const [cards, setCards] = useState<CardInfo[]>();

  useEffect(()=>{
    const shuffledCards = [...array].sort(() => Math.random() - 0.5);
    setCards(shuffledCards);

  }, [])

  return cards;
};

export { useShuffle };
dim cosmos
#

y que problema estás teniendo?

dawn iris
#

se ejecuta primero el custom hook

#

y rompe todo

#

ya en el momento que en que se ejecuta aun lo datos no han llegado

dim cosmos
dawn iris
dim cosmos
#

vale

dawn iris
#

en el return

dim cosmos
#

en el useEffect tienes algunas cosas que pueden generar problemas

#

la dependencia matchedPairs y el llamado a setMatchedPairs

#

si dentro del efecto modificas una dependencia, se va a volver a ejecutar el efecto y puede volverse una ejecución infinita

#

choiseOne.flipped = false; los estados no pueden modificarse asi, ya que deben ser inmutables

#

lo que tienes comentado, lo podrías meter en otro useEffect

#

para que no te de problemas

dawn iris
#

okok

#

y como podria modificar en elemento del estado?

dim cosmos
# 
useEffect(() => {
  if (native.length > 0 && learn.length > 0) {
     // acá volvemos al problema de modificar la dependencia cardData
     setCard(useShuffle(cardData))
  }
}, [native.length, learn.length, cardData])
dim cosmos
#

algo como eso

dawn iris
#

voy a hacerlo, gracias

dim cosmos
#

setChoiseOne({ ...choiseOne, flipped: false }) o asi

#

con gusto

dawn iris
#

pregunta, cuantos useEffect pueden estar en un component?

dim cosmos
#

igual debes buscar la manera de darle la vuelta a la logica que tienes, porque tienes muchas posibilidades de terminar con ejecución indefinida del useEffect

dim cosmos
dawn iris
#

okokok

dim cosmos
#

pero debe evitarse su uso para modificar estados en base a otros estados

#

ya que genere re-renders y puede afectar el performance

dawn iris
#

ookokok, cualquier cosa te escribo doge