Updating my data when using FlatList causes "Maximum call stack size exceeded"

Question

I am getting a very annoying Maximum call stack size exceeded. when loading data using <FlatList> and onEndReached. The onRefresh does not cause this. I presume this has to do with the <FeedList> re-rendering when I update the data.

Can someone help me fix this or at least point me in the right direction?

export function useFeedState() {
  const state = useState(feedState);
  const api = useApi();

  function loadPosts(clear = false) {
    api
      .request<{ posts: IPost[] }>('get', 'posts', { feed: state.feed.value })
      .then((data) => {
        state.posts.set(
          clear ? data.posts : [...state.posts.value, ...data.posts]
        );
      })
      .catch((error) => {
        console.log(error);
      });
  }
  // ...
}

Component:

export default function FeedList() {
  const feedState = useFeedState();

  return (
    <FlatList
      data={feedState.posts}
      renderItem={({ item }) => <PostSlide post={item} />}
      keyExtractor={(item) => item.id.toString()}
      refreshing={feedState.isLoading}
      onRefresh={() => feedState.loadPosts(true)}
      onEndReached={() => {
        feedState.loadPosts();
      }}
    />
  );
}

Can you try setting onEndReachedThreshold? onEndReachedThreshold={0.5} — Akshay Shenoy, Jan 08 '22 at 17:30

score 0 · Accepted Answer · answered Jan 08 '22 at 20:46

I solved this by using a callback in the set-method. Hookstate is built upon Reacts state and therefor has some similarities. You can read more about when to use a callback here.

// works
state.posts.set((prev) => {
  return clear ? data.posts : [...prev, ...data.posts];
});

// also works
clear ? state.posts.set(data.posts) : state.posts.merge(data.posts);

// doesn't work
state.posts.set(
  clear ? data.posts : [...state.posts.value, ...data.posts]
);

I guess maybe the reason for the loop was caused by using the value of the same state I was updating.

Updating my data when using FlatList causes "Maximum call stack size exceeded"

1 Answers1