React Component постоянно перерисовывается при загрузке изображений из экземпляра AWS s3

Question

Я создаю приложение, которое должно отображать изображение (изображение A), разрешать пользователю нажимать кнопку для взаимодействия с изображением A, отображать другое изображение поверх исходного изображения A и отображать новое изображение (изображение B). ) на своем месте. Я загружаю и изображение A, и изображение B из экземпляра AWS, поскольку изображения A и B могут быть одним из более чем 2000 различных изображений. Моя цель - перерисовывать компонент внутри моего родительского компонента каждый раз, когда вызывается определенная функция.

Проблема, с которой я сталкиваюсь: когда я рендерил компонент "Landing" с использованием этого кода, он постоянно перерисовывается.

import React from 'react';
import Background from './Media/background.jpg';
import Comic from'./Comic.js';
import { useEffect } from 'react';


export default function Landing() {

    let is_real = ''
    let caption = ''
    let points = 0
    async function getComics() {
        const response = await fetch('http://127.0.0.1:5000/comics')
        const data = await response.json()
        caption = data['caption']
        is_real = data['is_real']
    }

    function GuessYes() {
        if (is_real == true) {
            points++
        }
    }

    function GuessNo() {
        if (is_real == false) {
            points++
        }
    }

    useEffect(() => {
        getComics()
    },[])

    return(
        <div style={{backgroundImage: `url(${Background})`}}>
            <Comic caption={caption}/>
            <button onClick={GuessYes}>Yes</button>
            <button onClick={GuessNo}>No</button>
        </div>
    )

Вот компонент Comi c:

import React from 'react';


export default function Comic (props) {

    return(
        <div>
            <img src='comic.jpg'/>
            <h1>{props.caption}</h1>
        </div>
    )
}

Вот комикс flask маршрут:

@app.route('/comics', methods = ['GET'])
def comics():

    comics = None

    with sqlite3.connect(COMICSDBPATH) as conn:

        cur = conn.cursor()
        sql = """SELECT * FROM comics
        ORDER BY RANDOM()
        LIMIT 2;"""

        cur.execute(sql)
        comics = cur.fetchall())
    download_comic(int(comics[0][1]))

    if random.randint(0,101) < 50:
        return jsonify({'caption': comics[0][0], 'is_real': 'true'})
    else:
        return jsonify({'caption': comics[1][0], 'is_real': 'false'})

Вот файл download_comi c python function:

import boto3

def download_comic(num):

    s3 = boto3.resource('s3')
    s3_client = boto3.client('s3')
    bucket = s3.Bucket('randomarm')
    s3_client.download_file('randomarm',f'{num}.jpg', f'/home/my-app/public/comic.jpg')

Моя цель - сделать так, чтобы родительский компонент (Landing) не рендеринг, а просто рендеринг Comi c на кнопке pu sh. Спасибо за вашу помощь!