Как загрузить всю выборку из React перед загрузкой пользовательского javascript из отдельного файла

Я использую как реакцию, так и jquery отдельно. Я хочу, чтобы bundle.js реагировал на получение всех данных api перед запуском функций jquery.

У меня есть код реакции, загружающий все изображения с серверов / api и jquery, чтобы сдвинуть эти изображения и управлять высотой изображения в соответствии с экраном. Сначала я включил bundle.js, а затем свой файл custom.js. Несмотря на то, что bundle.js запускается первым, но api выборки запускается после custom.js, из-за чего jquery не может сдвинуть эти изображения.

App.js

export class App extends Component {

constructor(props){
    super(props)
    this.state = {
        loading : false,
        all_data : []
    }
    this.fetchFromServer();
}

fetchFromServer(){
    Promise.all([
        fetch("http://abcdef.com/api/slider.php",{
            method : "POST",
            headers: new Headers({
                'Accept' : 'application/json',
            }),
            body: JSON.stringify({
                limit : "10",
            })
        })
    ]).then(([all_post_api])=>Promise.all([all_post_api.json()])).
    then(([post_data]) => this.setState({
        loading : false,
        all_data : post_data
    }))
}

render(){
        const allowRender = this.state.all_data && this.state.all_data.carousel
        if (allowRender) {

        return (<div className = "right-content">

            <Main data = {this.state.all_data} />
        </div>)

        } 

        return null;
}

}

Main.js

export class Main extends Component {

render(){
    console.info(this.props.data.carousel);
    return (


                <div className = "flexslider home-page">
                    <ul className = "slides">
                    {
                        this.props.data.carousel.map((name,index)=>{
                            return (
                            <li className = "images-bg" key = {index}>
                                <img src = {name.url} />
                                <div className = "circle">
                                            <div className = "home-title left">
                                                <span>
                                                    Welcome <strong>to</strong>
                                                </span>
                                                <span>
                                                    <strong>foto</strong>hunter
                                                </span>
                                                <p>Only the best pictures of animals and travel.</p>
                                            </div>
                                            <a className = "button-down glyph fa-angle-down" href = ""></a>
                                        </div>
                            </li>
                            )

                        })

                    }
                    </ul>
                </div>




    )
}

}

custom.js

$(function (){        
 console.info("loaded content");
$('.images-bg').each(function(){
            $(this).css({
                'background-image': 'url(' +$('img', this).hide().attr('src') +')',
                'height': $(window).height()
            });
        });

        /*----------  BIG SLIDER  ----------*/
        $('.portfolio-with-details .flexslider, .service .flexslider').flexslider({slideshowSpeed: 5000});
        $('.portfolio-image.flexslider').flexslider({slideshow: false});
        $('.flexslider.home-page').flexslider({
            slideshowSpeed: 5000,
            after : function(slider){
                var next = $('.flex-active-slide', slider).find('.home-title');
                var className = '';
                if (next.hasClass('left')){
                    className = 'bounceInLeft';
                }else if (next.hasClass('top')){
                    className = 'flipInX';
                }else if (next.hasClass('zoom')){
                    className = 'bounceIn';
                }
                next.addClass(className + ' animated');
                next.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    next.removeClass(className + ' animated');
                });
            }
        });
        /*----------  //BIG SLIDER  ----------*/

    })

Ниже приведен снимок экрана, который я получаю сейчас. Хочу наоборот. Я ожидал, что сообщение custom.js console.info будет напечатано после Main.js console.info