Résoudre le problème de la boucle infinie provoquée par useEffect dans React

Question

Pourquoi ce code produit-il une boucle infinie dans React. Le useEffect ici avec data et columnDataWithTaskProperty provoque une boucle infinie, mais je ne sais pas pourquoi

const useBoard = () =>
  const { data: columnData } = useGetColumnQuery();
  const { données } = useGetTaskAccordingToStatus();
  const [columnDataWithTaskProperty, setColumnDataWithTaskProperty] = useState(
    []
  );

  const [finalState, sFinalState] = useState([]);

  useEffect(() => {
    const allColumns = columnData?.data?.map((item) => ({
      nom : article.nom,
      _id : article._id,
      Tâches: [],
    }));
    setColumnDataWithTaskProperty(allColumns);
  }, [colonneDonnées]);

  useEffect(() => {
      console.log("meeee data deps");
      const updateColumns = columnDataWithTaskProperty.map((column) => ({
        ...colonne,
        tâches : data.flat().filter((task) => task.status === column.name),
      }));
      sFinalState (colonnes mises à jour);
  }, [columnDataWithTaskProperty, données]);

  retour {
    état final,
  } ;
};
Voici comment j'utilise useGetTaskAccordingToStatus pour obtenir les données. J'ai utilisé React Query pour obtenir les données. 
const useGetTaskAccordingToStatus = () =>
  const { active_project } = useSelector (projectDataInStore);

  const userQueries = useQueries({
    requêtes : statesOfTaskManager.map((status) => {
      retour {
        queryKey : [statut, actif_project],
        requêteFn : () =>
          customAxiosRequestForGet("/tâche", {
            statut,
            Nom du projet : projet_actif,
          }),
        onSuccès : ({ données }) => {
          renvoyer des données ;
        },
      } ;
    }),
  });

  const data = userQueries?.map((item) => item?.data?.data);

  renvoyer { données } ;
};

Answer 1

Je vous suggère simplement d'utiliser un effet d'utilisation et de supprimer columnDataWithTaskProperty pour tester le sac, vous pourrez y revenir plus tard. Ceci est un exemple de ma suggestion, mais ne peut pas être testé sans données réelles.

const useBoard = () => {
  const { data: columnData } = useGetColumnQuery();
  const { data } = useGetTaskAccordingToStatus();
  const [finalState, sFinalState] = useState([]);

  useEffect(() => {
    const allColumns = columnData?.data?.map((item) => ({
      name: item.name,
      _id: item._id,
      tasks: [],
    }));
      console.log("meeee data deps");
      const updatedColumns = allColumns.map((column) => ({
        ...column,
        tasks: data.flat().filter((task) => task.status === column.name),
      }));
      sFinalState(updatedColumns);
  }, [columnData, data]);

  return {
    finalState,
  };
};