React App only Loads Data after a console.log

Question

When my react application loads the data in my table rows does not show on the screen. It appears only if I run a 'console.log' in the codebase. If I refresh the screen the data in the table rows will disappear and will not appear again until I run another console.log separate from the original console log. Here is my code:

import React, { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Moment from 'react-moment';
import { useTable } from 'react-table';
import { Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { projectsDetails } from '../actions/projectActions';

import Button from '../components/Button';

const ProjectSummary = () => {
  const dispatch = useDispatch();

  const projectDetails = useSelector(state => state.projectDetails);
  const { loading, error, projects } = projectDetails;

  useEffect(() => {
    dispatch(projectsDetails());
  }, [dispatch]);

  const COLUMN_NAMES = [
    {
      Header: 'Status',
      accessor: 'status'
    },
    {
      Header: 'Name',
      accessor: projects => (
        <Link to={`/project/${projects._id}`}>{projects.name}</Link>
      )
    },
    {
      Header: 'Project Identifiers',
      accessor: projects =>
        `${projects.projectId}-${projects.fundingSource}-${projects.typeNumber}`
    },
    {
      Header: 'Start Date',
      accessor: 'startDate'
    },
    {
      Header: 'End Date',
      accessor: 'endDate'
    },
    {
      Header: 'Type',
      accessor: 'type'
    },
    {
      Header: 'Location',
      accessor: 'state'
    }
  ];
  console.log(projects);

  const columns = useMemo(() => COLUMN_NAMES, []);
  const data = useMemo(() => projects, []);

  const tableInstance = useTable({
    columns,
    data
  });

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance;

  return (
    <Table striped {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      {projects.length > 0 ? (
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);

            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      ) : (
        <tbody>
          <h1>Loading...</h1>
        </tbody>
      )}
    </Table>
  );
};

export default ProjectSummary;

I am using Redux. Here is my action that is fired when the page loads:

import axios from 'axios';
import {
  PROJECT_DETAIL_REQUEST,
  PROJECT_DETAIL_SUCCESS,
  PROJECT_DETAIL_FAIL
} from '../constants/projectConstants';

export const projectsDetails = () => async dispatch => {
  try {
    dispatch({ type: PROJECT_DETAIL_REQUEST });

    const { data } = await axios.get('/api/projects');
    dispatch({
      type: PROJECT_DETAIL_SUCCESS,
      payload: data
    });
  } catch (error) {
    dispatch({
      type: PROJECT_DETAIL_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message
    });
  }
};

and my reducer

import {
  PROJECT_DETAIL_REQUEST,
  PROJECT_DETAIL_SUCCESS,
  PROJECT_DETAIL_FAIL
} from '../constants/projectConstants';

export const projectDetailsReducer = (state = { projects: [] }, action) => {
  switch (action.type) {
    case PROJECT_DETAIL_REQUEST:
      return { loading: true, projects: [] };
    case PROJECT_DETAIL_SUCCESS:
      return { loading: false, projects: action.payload };
    case PROJECT_DETAIL_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};