How to use React Lazy loading for redux connected component?

Question

I am super excited to use React.Lazy loading, however my component is using redux and I am getting warning error saying

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

here is code for App.js

import React, { Suspense } from 'react';
import queryString from 'query-string';
import { LoadingSpinner } from '../components/common';
import '../assets/styles.css';

const App = () => {
  const { target } = queryString.parse(window.location.search);
  const NewsComponent = React.lazy(() => import('../components/news/News'));
  const SchoolComponent = React.lazy(() =>
    import('../components/schools/Schools')
  );
  const CalendarComponent = React.lazy(() =>
    import('../components/calendar/Calendar')
  );

  return (
    <main className="max-w-md mx-auto font-display">
      <Suspense fallback={() => <LoadingSpinner />}>
        {target === 'news' && <NewsComponent />}
        {target === 'schools' && <SchoolComponent />}
        {target === 'calendar' && <CalendarComponent />}
      </Suspense>
    </main>
  );
};

export default App;

and here is my connected component to lazy load

import React, { useEffect, useState, MouseEvent } from 'react';
import { connect } from 'react-redux';
import { fetchNews } from '../../actions/news';
import NewsList from './NewsList';
import NewsTips from './NewsTips';
import { NewsType, StoreStateType } from '../../types';
import queryString from 'query-string';
import { Error } from '../common';

interface NewsProps {
  news: NewsType[];
  fetchNews(): void;
  isLoading: boolean;
  hasError: boolean;
}
interface NewsState {
  displayTips: boolean;
}

const News = (props: NewsProps, state: NewsState) => {
  const { news, isLoading, hasError, fetchNews } = props;
  const [displayTips, setDisplayTips] = useState(false);

  useEffect(() => {
    if (schools) {
      fetchNews();
    }

    showTips === 'true' ? setDisplayTips(true) : setDisplayTips(false);
  }, []);

  const styledImage = {
    backgroundImage:
      'url(https://engadinew-p65.test.schools.nsw.gov.au/content/dam/doe/sws/global/global-master/images/assets/school-finder.png)',
  };

  return (
    <section className="p-4">
      <h1 className="display-1 text-blue-dark mb-4">News</h1>
      {isLoading && <div>Loading</div>}
      {hasError && <Error />}
    </section>
  );
};

const mapStateToProps = ({
  news,
  isLoading,
  hasError,
}: StoreStateType): {
  news: NewsType[];
  isLoading: boolean;
  hasError: boolean;
} => {
  return { news, isLoading, hasError };
};

export default connect(mapStateToProps, { fetchNews })(News);

Can this go to production even there is a warning? Any idea of how to fix the warning?

Answer 1

Change this line from returning a function:

<Suspense fallback={() => <LoadingSpinner />}>

to returning the component

<Suspense fallback={<LoadingSpinner />}>