React - условие componentWillReceiveProps не отображает данные в компоненте

У меня есть компонент с методом живого цикла componentWillReceiveProps. внутри компонента я могу создать действие.

Насколько я понимаю, componentWillReceiveProps рендерит компонент каждую секунду. по этой причине я добавил условие для активации рендеринга компонента только тогда, когда this.props не равно prevProps.

по какой-то причине каждый раз, когда реквизит обновляется, this.props.fetchCourses(); внутри componentWillReceiveProps не отображается. также я не вижу результата console.info. Что указывает на то, что блок не p

Я использую библиотеку fast-deep-equal для сравнения объектов, но я открыт для предложений.

мой вопрос в том, почему компонент не отображается при обновлении реквизита.

import React, { Component } from "react";
import { connect } from "react-redux";
import equal from "fast-deep-equal";

import { fetchCourses, deleteCourse } from "../../actions";

class Courses extends Component {
  componentDidMount() {
    this.props.fetchCourses();
  }


  componentWillReceiveProps(prevProps) {
    console.info(this.props.courses);
    console.info(prevProps.courses);

    if (!equal(this.props.courses, prevProps.courses)) {
      this.props.fetchCourses();
    }
  }

  render() {
    const prevProps = prevProps => {
      console.info("this.props", this.props.courses.length);
      console.info("prevProps ", prevProps.courses.length);
    };

    const courses = this.props.courses.map(course => {
      return (
        <tr key = {course && course.id}>
          <td>
            {course.coursename}- {course && course.id}
          </td>

          <td>{course.coursetype ? "yes" : "no"}</td>

          <td>{course.courseweeklyhours}</td>

          <td>
            <button
              onClick = {() => this.props.deleteCourse(course && course.id)}
            >
              הסר
            </button>
          </td>
        </tr>
      );
    });

    return <tbody>{courses}</tbody>;
  }
}

const mapStateToProps = state => {
  console.info("state ", state);

  return {
    courses: state.courses
  };
};

export default connect(
  mapStateToProps,
  { fetchCourses, deleteCourse }
)(Courses);