Q:

Метод render перестраиваться бесконечное кол-во раз

начальный файл 
import React, { Component } from "react";
import {connect} from "react-redux";
import List from "../../components/List";
import { getData } from "../../store/actions/getData";
import Spinner from "../../UI/Spinner/Spinner";

class ProductsArea extends Component {

    componentDidMount() {
        this.props.onGetProducts();
    }

    render() {
        if (this.props.products.length === 0) {
            return <Spinner />;
        }
        return <List isProducts = {this.props.products}/>;
    }
}

const mapStateToProps = (state) => {
    return  {
        products: state.prod
    }
};

const dispatchStateToProps = (dispatch) => {
    return  {
        onGetProducts: () => getData(dispatch)
    }
};

export default connect(mapStateToProps, dispatchStateToProps)(ProductsArea);

//метод getData

export function getData(dispatch) {
    dispatch({ type: actions. PRODUCTS_LOADING});
    axios.get("api/getData")
        .then(res => {
            dispatch({
                type: actions. GET_PROD_LIST,
                val: res.data
            });
        });
}

//List - тут метод Render выполняется бесконечное кол-во раз, данные успешно приходят
import React, {Component} from "react";
import Spinner from "../UI/Spinner/Spinner";

class List extends Component {

    state = {
        dataLoaded: false
    };

    dataLoadHandler = () => {
        this.setState({ dataLoaded: true });
    };

    render() {

        let result = <Spinner/>;
        const products = this.props.isProducts;

        console.log(products);

        if (products.length > 0) {
            this.dataLoadHandler();
        } 

        if (this.state.dataLoaded) {
            result = products.map(prod => {

                const primaryImgUrl = `img/product/mediam/${prod. PrimaryImg}`;
                const secondaryImgUrl = `img/product/mediam/${prod. SecondaryImg}`;

                const isNew = prod. New ?  
                (<div className="label_new">
                        <span className="new">new</span>
                    </div>) : null;

                const isSalePercent = prod. SalePercent ! = null ?  
                (<div className="sale-off">
                        <span className="sale-percent">-55%</span>
                    </div>) : null;

                return (<div className="single-product">
                    <div className="col-md-3 col-sm-4 col-xs-12">

                        {isNew}

                        {isSalePercent}

                        <div className="product-img">
                            <a href="#">
                                <img className="primary-img" src={primaryImgUrl} alt="Product" />
                                <img className="secondary-img" src={secondaryImgUrl} alt="Product" />
                            </a>
                        </div>
                    </div>
                    <div className="col-md-9 col-sm-8 col-xs-12">
                        <div className="product-description">
                            <h5><a href="#">{prod. Name}</a></h5>
                            <div className="price-box">
                                <span className="price">$ {prod. Price}</span>
                                <span className="old-price">$ {prod. OldPrice}</span>
                            </div>
                            <p className="description">{prod. Description}</p>
                            <div className="product-action">
                                <div className="button-group">
                                    <div className="product-button">
                                        <button><i className="fa fa-shopping-cart"></i> Add to Cart</button>
                                    </div>
                                    <div className="product-button-2">
                                        <a onClick={this.openModalHandler} href="#" className="modal-view" id={
prod. ProductId} data-toggle="modal" data-target="#productModal"
                                           title="Quickview"><i className="fa fa-search-plus"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>);
        });
    } 

    return (
        <div className="listview">
            {result}
        </div>  
    );
}

}
export default List;
Почему возникает такая ситуация, кто может объяснить? 

A:

Старайтесь не делать setState внутри render
У вас 2 одинаковых условия: products.length > 0 и this.state.dataLoaded
Когда у вас нет продуктов: products.length > 0 === false и this.state.dataLoaded === false
Когда есть продукты: products.length > 0 === true и this.state.dataLoaded === true
Получается что когда вы получили список продуктов, то вызывается функция dataLoadHandler внутри нее у вас setState, который вызывает перерисовку компонента.  Поэтому у вас получается бесконечная перерисовка. 
Вообще смысла в конструкции 
if (products.length > 0) {
        this.dataLoadHandler();
}

для вашего компонента нет.  
Перепишите свое условие 
if (products.length > 0) {
    result = products.map(prod => {
           // тут ваш код скопируйте
           ...
    }
}

Тогда все будет в порядке. 
UPD: можете просто поменять условия this.state.dataLoaded и products.length > 0 местами, так тоже будет работать.