I'm passing a component to the renderItem. Inside the component I have a state and i make a call to the api that will update this state with the response.

But what is happening is, it renders loading... then it actually shows what the api returned, goes back to showing loading and then goes back to showing what the api returned.

For example: if the searchDescriptionById function returns description 1, what is rendering on the screen is: loading... -> description 1 -> loading... -> description 1

as if at the first setState the component is remounting

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}/>}