React: "Maximum update depth exceeded" when mapping a basic array of data into multiple co-CodePudding

I am having this error index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. that is running non stop has if there is an infinite React rerendering recursion going on. Yet as my page is fairly simple, and as I don't use either useEffect nor useState, I don't grasp what's triggering this error. Anyone to explain this behavior?

export function HomeScreen({ navigation }: any) {
  const dailyTasksElements = dailyTasksFakeData.map((task, index) => {
    return (
      <Pressable
        key={index}
        style={styles.dailyTask}
        onPress={() => navigation.navigate(task.route)}
      >
        <Text>{task.description}</Text>
      </Pressable>
    )
  })
  return (
    <>
      <View style={styles.container}>
        <View style={styles.header}>
          <ProfileInformation />
          <Progression />
        </View>
        <View style={styles.dailyTasks}>{dailyTasksElements}</View>
      </View>
      <NavBar />
    </>
  )
}

CodePudding user response：

You're rendering a UI Element and putting its memory address into a const (dailyTasksElements).

Now this dailyTasksElements could be rendered and reInitialized several times without any need to do that (it's violating the rule of React reconcilliation which means reRender only if needed).

To workaround, just don't put the value of some const as a rendered component (or set of components), just declare a function and return something or make another component like below.

export function HomeScreen({ navigation }: any) {
  const dailyTasksElements = () => (
    <>
      {dailyTasksFakeData.map((task, index) => {
        return (
          <Pressable
            key={index}
            style={styles.dailyTask}
            onPress={() => navigation.navigate(task.route)}>
            <Text>{task.description}</Text>
          </Pressable>
        );
      })}
    </>
  );
  return (
    <>
      <View style={styles.container}>
        <View style={styles.header}>
          <ProfileInformation />
          <Progression />
        </View>
        <View style={styles.dailyTasks}>{dailyTasksElements()}</View>
      </View>
      <NavBar />
    </>
  );
}

or Even better

const DailyTasksFakeData: React.FC<{ navigation: someType }> = ({
  navigation
}) => (
  <>
    {dailyTasksFakeData.map((task, index) => {
      return (
        <Pressable
          key={index}
          style={styles.dailyTask}
          onPress={() => navigation.navigate(task.route)}>
          <Text>{task.description}</Text>
        </Pressable>
      );
    })}
  </>
);

export function HomeScreen({ navigation }: any) {
  return (
    <>
      <View style={styles.container}>
        <View style={styles.header}>
          <ProfileInformation />
          <Progression />
        </View>
        <View style={styles.dailyTasks}>
          <DailyTasksFakeData navigation={navigation} />
        </View>
      </View>
      <NavBar />
    </>
  );
}

CodePudding user response：

It happened that my map was perfectly fine.

I commented my subcomponent one by one to isolate the issue and it came out that the NativeBase's Avatar component trigger the issue. It was located inside ProfileInformation.

No more error. I am very surprise but that's how I solved it. I am using my own component as much as possible now.