Загрузка блесны с хуком реакции useEffect и Redux и без хука useState

Question

Мне нужен загрузочный счетчик для моего компонента. Я использую реагирующий хук useEffect, и поскольку я использую redux, я не могу использовать useState в этом компоненте.

это то, что я получил до сих пор, и это не работает, как ожидалось.

import React, { useEffect } from 'react';
import { fetchData } from 'lib';


export default function Example(props) {

  let isFree = false;
  let isLoading = true;

  useEffect(() => {
    async function check() {
      const result = await fetchData(123);

      isLoading = false; // I am aware of react-hooks/exhaustive-deps
      if (!result){
        isFree = true; // I am aware of react-hooks/exhaustive-deps
      }
    }
    check();

    return function cleanup() {
      isLoading = false;
    };

  })

  const bookMe = ()=> {
    if (isLoading) {
      return false;
    }

    // do something
  };

  return (
    <div
      className="column has-text-centered is-loading">
      <div
        className={
          'button is-small is-outlined ' +
          ( isLoading ? ' is-loading' : '')
        }
        onClick={bookMe}
      >
        Select this slot
      </div>
    </div>
  );
}

Примечание. Я попытался useRef, но ответа не получил.

Примечание: я могу достичь решения с помощью компонента класса, как показано ниже. Следуйте isLoading.

Но мой вопрос - переписать все это с помощью useEffect() и без useState()

import React, { Component } from 'react';
import { fetchData } from 'lib';

export default class Example extends Component {
  _isMounted = false;

  state = {
    isFree: false,
    isLoading: true
  };

  componentDidMount() {
    this._isMounted = true;

    fetchData(123).then(result => {
      if (this._isMounted) {
        this.setState({ isLoading: false });
      }
      if (!result) {
        if (this._isMounted) {
          this.setState({ isFree: true });
        }
      }
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  bookMe = () => {
    if (this.state.isLoading) {
      return false;
    }

    // do something
  };

  render() {
    return (
      <div
        className="column has-text-centered is-loading">
        <div
          className={
            'button is-small is-outlined ' +
            (this.state.isLoading ? ' is-loading' : '')
          }
          onClick={this.bookMe}
        >select this slot</div>
      </div>
    );
  }
}