Estoy pasando un componente al renderItem. Dentro del componente tengo un estado y hago una llamada a la API que actualizará este estado con la respuesta.

Pero lo que sucede es que representa la carga... luego muestra lo que devolvió la API, vuelve a mostrar la carga y luego vuelve a mostrar lo que devolvió la API.

Por ejemplo: si la función searchDescriptionById devuelve la descripción 1, lo que aparece en la pantalla es: cargando... -> descripción 1 -> cargando... -> descripción 1

como si en el primer setState el componente se estuviera volviendo a montar

 const Component= ({ item }) => { const [description, setDescription] = useState('loading...'); useEffect(() => { searchDescriptionById(item.id).then(res => { setDescricao(res); }) }, []) return ( <TouchableOpacity style={{ flex: 1 }}> <Textbold>{item.id}</Text> <Text>{description}</Text> </TouchableOpacity> ) } <FlatList data={data} contentContainerStyle={{ paddingBottom: 10 }} keyExtractor={item => item.id} renderItem={({item}) => <Component item={item}/>}