Strange thing happens with Flatlist

[shawhu]

Probably it's not a bug but... Just using the example of openai example...it works when I put a pressable around the text and try to trigger events, it works. But...when I slightly changed it to use a Flatlist...I can't seem to trigger any UI component events during the SSE events.. all those onTouchStart will be triggered together...at the end...after it's done.

Should I stop using Flatlist? Or...

<FlatList
    onScroll={() => {
      console.log(`onScroll onScroll onScroll onScroll onScroll onScroll onScroll onScroll onScroll onScroll `);
    }}
    onTouchStart={() => {
      console.log(`onTouchStart onTouchStart onTouchStart onTouchStart onTouchStart onTouchStart onTouchStart `);
    }}
    data={texts}
    ListHeaderComponent={() => {
      return <View style={{ height: 300, backgroundColor: "red" }}></View>;
    }}
    renderItem={({ item, index }) => {
      return (
        <Pressable
          onTouchStart={() => {
            console.log(
              `onTouchStart onTouchStart onTouchStart onTouchStart onTouchStart onTouchStart onTouchStart `
            );
          }}
        >
          <Text key={index}>{item}</Text>
        </Pressable>
      );
    }}
  />

and my states and useEffect

    const [texts, setTexts] = useState<string[]>(["Loading..."]);
useEffect(() => {
const es = new EventSource("https://api.openai.com/v1/chat/completions", {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${OpenAIToken}`,
  },
  method: "POST",
  // Remember to read the OpenAI API documentation to set the correct body
  body: JSON.stringify({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "system",
        content: "You are a helpful assistant.",
      },
      {
        role: "user",
        content: "(use 500 tokens or more to answer: explain what time dilation is?)",
      },
    ],
    max_tokens: 500,
    n: 1,
    temperature: 0.7,
    stream: true,
  }),
  pollingInterval: 0, // Remember to set pollingInterval to 0 to disable reconnections
});

es.addEventListener("open", () => {
  setTexts([""]);
});

es.addEventListener("message", (event) => {
  if (event.data !== "[DONE]") {
    const data = JSON.parse(event.data!);

    if (data.choices[0].delta.content !== undefined) {
      console.log(`Received a message deltaa: ${data.choices[0].delta.content}`);

      setTexts((prevTexts) => {
        const newTexts = [...prevTexts];
        newTexts[0] += data.choices[0].delta.content;
        return newTexts;
      });
    }
  }
});

return () => {
  es.removeAllEventListeners();
  es.close();
};
}, []);

[amit13091992]

@shawhu you might need to update rendering logic and use code optimization to prevent re-rendering the UI. that might solve the problem you are facing.