Use memo to render Listing only once

assets/js/src/newsletters/sending_status.jsx

@@ -28,7 +28,6 @@ const messages = {
 
 const SendingStatus = (props) => {
   const newsletterId = props.match.params.id;
-  const [isLoading, setIsLoading] = React.useState(true);
   const [newsletterSubject, setNewsletterSubject] = React.useState('');
 
   React.useEffect(() => {
@@ -40,13 +39,8 @@ const SendingStatus = (props) => {
         id: newsletterId,
       },
     })
-      .done((res) => {
-        setNewsletterSubject(res.data.subject);
-        setIsLoading(false);
-      })
-      .fail((res) => {
-        MailPoet.Notice.showApiErrorNotice(res);
-      });
+      .done(res => setNewsletterSubject(res.data.subject))
+      .fail(res => MailPoet.Notice.showApiErrorNotice(res));
   }, [newsletterId]);
 
   return (
@@ -56,11 +50,31 @@ const SendingStatus = (props) => {
         newsletterId={newsletterId}
         newsletterSubject={newsletterSubject}
       />
-      {!isLoading && (
+      <SendingStatusListing location={props.location} params={props.match.params} />
+    </>
+  );
+};
+SendingStatus.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }).isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+const compareProps = (prev, next) => (
+  prev.location.pathname === next.location.pathname
+  && prev.params.id === next.params.id
+);
+
+const SendingStatusListing = React.memo(({ location, params }) => (
   <Listing
     limit={window.mailpoet_listing_per_page}
-        location={props.location}
-        params={props.match.params}
+    location={location}
+    params={params}
     endpoint="sending_task_subscribers"
     base_url="sending-status/:id"
     onRenderItem={item => <div><ListingItem {...item} /></div>}
@@ -74,19 +88,14 @@ const SendingStatus = (props) => {
       CronMixin.checkCronStatus(state);
     }}
   />
-      )}
-    </>
-  );
-};
-SendingStatus.propTypes = {
+), compareProps);
+SendingStatusListing.propTypes = {
   location: PropTypes.shape({
     pathname: PropTypes.string,
   }).isRequired,
-  match: PropTypes.shape({
   params: PropTypes.shape({
     id: PropTypes.string.isRequired,
   }).isRequired,
-  }).isRequired,
 };
 
 const StatsLink = ({ newsletterId, newsletterSubject }) => {