UI not rendering while useEffect fires-CodePudding

I'm trying to get dynamic next page with Object.entries[currentTaskIndex], everything works great and i'm getting the task data based on their indexes , but useEffects not rendering UI when dependency changes, actually it's rendering same task as before ,so this mean when useState fire, currentTaskIndex state changes to 2 but it's stillshowing index 1 items, but when i refresh the page it's showing index 2 items,so the question is that, how can i show index 2 items while useEffects fire?

This is what i have:

  const [isCorrect, setIsCorrect] = useState(false);
  const [currentTaskIndex, setCurrentTaskIndex] = useState(0);

  useEffect(() => {
    const checkIfCorrect = newData.map((data) => {
     ....
    });
  }, [!isCorrect ? newItems : !newItems]);

  // Filtered task
  useEffect(() => {
    const filterObject = newData.filter((data) => {
      return data.map((dataItems) => {
        return dataItems.map((tasks, i) => {
          return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
            setFilteredTasks(task);
          });
        });
      });
    });
  }, [newData]);


useEffect(() => {
    isCorrect && setCurrentTaskIndex((prev) => prev   1);
    setNewItems([]);
    setIsCorrect(false);
    const filterObject = newData.filter((data) => {
      return data.map((dataItems) => {
        return dataItems.map((tasks, i) => {
          return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
            setFilteredTasks((currTask) => [...currTask, task]);
          });
        });
      });
    });
  }, [isCorrect]);

   {filteredTasks.map((taskItems, i) => (
              <View key={i}>
                {taskItems.en?.map((enItems, i) => (
                 .....
            ))}
          </View>

CodePudding user response：

React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.

So, by adding just currentTaskIndex on dependency array your useEffect also re-render.

when you just put newData on dependency array its could not update UI because newData is not a state or Props.

Yes this is your solution:

// Filtered task
  useEffect(() => {
    const filterObject = newData.filter((data) => {
      return data.map((dataItems) => {
        return dataItems.map((tasks, i) => {
          return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
            setFilteredTasks(task);
          });
        });
      });
    });
  }, [newData, currentTaskIndex]); <------

CodePudding user response：

An finally fixed!

by just adding CurrentTaskIndex as dependency to Filtered task useEffects

 // Filtered task
  useEffect(() => {
    const filterObject = newData.filter((data) => {
      return data.map((dataItems) => {
        return dataItems.map((tasks, i) => {
          return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
            setFilteredTasks(task);
          });
        });
      });
    });
  }, [newData, currentTaskIndex]); <------