Solve the problem of infinite loop caused by useEffect in React

Question

Why does this code produce an infinite loop in React. The useEffect here together with data and columnDataWithTaskProperty causes an infinite loop, but I don't know why

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

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

  useEffect(() => {
    const allColumns = columnData?.data?.map((item) => ({
      name: item.name,
      _id: item._id,
      tasks: [],
    }));
    setColumnDataWithTaskProperty(allColumns);
  }, [columnData]);

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

  return {
    finalState,
  };
};

Here is how I use useGetTaskAccordingToStatus to get the data. I used React Query to get the data.

const useGetTaskAccordingToStatus = () => {
  const { active_project } = useSelector(projectDataInStore);

  const userQueries = useQueries({
    queries: statesOfTaskManager.map((status) => {
      return {
        queryKey: [status, active_project],
        queryFn: () =>
          customAxiosRequestForGet("/task", {
            status,
            projectName: active_project,
          }),
        onSuccess: ({ data }) => {
          return data;
        },
      };
    }),
  });

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

  return { data };
};

Answer 1

I suggest you just use a use effect and remove columnDataWithTaskProperty to test sack, you can return it later. This is an example of my suggestion, but cannot be tested without real data.

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,
  };
};