Function called from a react custom hook returns 'is not a function'

Question

When I try and call a function from my custom hook I get back an error when the screen loads saying 'handleLazyLoad' is not a function. Im not sure why React cant figure out that the handleLazyLoad is a function, I am thinking I am possible exporting it or calling it incorrectly.

Custom hook:

import { useState } from 'react';

const useLoadInvoices = (initialPageValue, totalInvoices) => {
  const [currentPage, setCurrentPage] = useState(initialPageValue);

  const pageSize = 30;

  const handleLazyLoad = () => {
    if (currentPage * pageSize < totalInvoices) setCurrentPage(currentPage + 1);
  };

  const totalShownInvoices = currentPage * pageSize > totalInvoices ? totalInvoices : currentPage * pageSize;

  return [totalShownInvoices, handleLazyLoad];
};

export default useLoadInvoices;

Invoice Screen Component:

import React from 'react';
import useLazyLoad from './hooks/useLazyLoad';

const InvoicesScreen = () => {
  const [invoices, setInvoices] = useState(null);
  const [totalInvoices, setTotalInvoices] = useState(null);
  const [handleLazyLoad, totalShownInvoices] = useLoadInvoices(1, totalInvoices);

  handleLazyLoad();

  return (
    <AccountPageList
      type="invoices"
      handleLazyLoad={() => handleLazyLoad()}
      start={1}
      finish={totalShownInvoices}
      total={totalInvoices}
      items={invoices}
    />
  );
};

export default InvoicesScreen;

Typo: You got the order of the two elements in your array reversed. — Quentin
– Quentin, Commented Jan 10, 2022 at 10:37
Nice one, I didn't realise the order mattered or think of switching it — walker1
– walker1, Commented Jan 10, 2022 at 10:38
is does when its an array, if you had of returned an object, it wouldnt — andy mccullough
– andy mccullough, Commented Jan 10, 2022 at 10:40
@Thomas, depends, sometimes you dont want the args to passed through to the function automatically — andy mccullough
– andy mccullough, Commented Jan 10, 2022 at 10:41

Michael · Accepted Answer · 2022-01-10 10:42:41Z

6

You are returning an Array from your custom hook, so when destructuring the custom hook the order matters. To Avoid such problems you can change this part in your custom hook from:

return [totalShownInvoices, handleLazyLoad];

to:

return {totalShownInvoices, handleLazyLoad};

Then you can destructure it as follows and the order wouldnt matter:

const {handleLazyLoad, totalShownInvoices} = useLoadInvoices(
    1,
    totalInvoices,
  );

answered Jan 10, 2022 at 10:42

Michael

1,0178 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Abdullah · Accepted Answer · 2022-01-10 10:46:04Z

1

The order matters when you destructure on array Try

const [totalShownInvoices,handleLazyLoad] = useLoadInvoices(
    1,
    totalInvoices,
  );

answered Jan 10, 2022 at 10:46

Muhammad Abdullah

3224 silver badges12 bronze badges

Collectives™ on Stack Overflow

Function called from a react custom hook returns 'is not a function'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related