Как использовать несколько крюков useEffect в одном компоненте?

Question

Хорошо, я полностью новичок с хуками, и до сих пор удалось создать компонент:

const Dashboard = ({
  getCurrentReport,
  auth: { user },
  report: { report, loading }
}) => {
  useEffect(() => {
    getCurrentReport();
  }, [getCurrentReport]);
  return loading && report === null ? (
    <Spinner />
  ) : (
    <div className="dashboard-container">
      {!report && (
        <span className="main-text">
          make a report
        </span>
      )}
      {!report && (
        <Link className="create-button" to="/report">
          Create Report
        </Link>
      )}
      {report && (
        <Fragment>
          <div className="num-container">
            <span className="main-text">num of days: </span>
            <div className="num-number">
              <span className="header-text">
                5
              </span>
            </div>
          </div>
        </Fragment>
      )}
    </div>
  );
};

Здесь мне нужно вычислить разницу между двумя датами, одна из которых report.startDate доступный из состояния избыточности, а другой - today (теперь Date ()). Пример значения report.startDate: 2020-03-22T20:00:00.000Z

Поскольку я еще не полностью понимаю хуки, я не могу понять, где написать функцию в вышеприведенном компоненте, которая рассчитала бы разницу в днях , и это будет отображать рассчитанную сумму вместо числа 5.

Что мне здесь использовать? Другое использование эффекта?

Answer 1

             <span className="header-text">
                {Number(
                  (new Date().getTime() / 1000 -
                    moment(report.startDate)
                      .toDate()
                      .getTime() /
                      1000) /
                    86400
                ).toFixed()}
              </span>

Это помогло получить то, что мне нужно. Тем не менее, я уверен, что для этого должен быть лучший способ, и мы с радостью ответим на правильный вопрос тому, кто поможет провести рефакторинг кода.