I have been trying to fetch data without using setTimeout from getProducts function. The code fetches data once in 50 trials when I tried setTimeout function outside the useEffect. I am new to react and I am trying to refactor the code.

const Allproducts = (props) => {

  useEffect(() => {
  let getProductsData = setTimeout(() => props.getProducts(), 10);
        return() => {
    clearTimeout(getProductsData);
  };
 },[]);

    const { data } = props.security;
let productsData=[];
    if(productsData['SOLDOUT'] === "" || productsData['AVAILABLE'] === "") {
      productsData= <Loader />;
    }

  return(
    <div>
      <div>
        <h1 className="primary-header">Products</h1>
        <Broadcast/>
      </div>
            
      <Row>
        <Col>
          <Jumbotron id="allcards">
            <div className="card">
              <h2>{productsData['AVAILABLE']}</h2>
              <h6>Available</h6>
            </div>
          </Jumbotron>
        </Col>
        <Col>
          <Jumbotron id="allcards">
            <div className="card">
              <h2>{productsData['SOLDOUT']}</h2>
              <h6>Sold out</h6>
            </div>
          </Jumbotron>
        </Col>
      </Row>
    </div>
  )
}

const mapStateToProps = (state) => ({
  security: state.security,
});

export default connect(mapStateToProps, { getProducts })(AllProducts);