CODEWITHSUNDEEP
reactjsreact-hooks
dns_nx
dns_nx

Reputation: 3943

React - Custom hook throws error when using it

I've got a question. I'm sure it is a simple one, but actually I can't figure out, what the issue is. I have this custom hook:

const goodsSetupWizardController = (props) => {
    const [product, setProduct] = useState(props.product);

    const getComponent = (step) => {
        //...
    };

    const isNextButtonDisabled = (step) => {
        //...
    };

    const needsNextStepToBeSkipped = (direction) => {
        //...
    };

    return {
        getComponent,
        isNextButtonDisabled,
        needsNextStepToBeSkipped
    };
}

export default goodsSetupWizardController;

...but when I want to use it, I get this error ("...goodsSetupWizardController is not a function"). Here is the full error:

> react-dom.development.js?ac89:22839 Uncaught TypeError: (0 ,
> _components_managementInterface_shop_tabs_productSetupWizard_setups_goodsSetupWizard_controller__WEBPACK_IMPORTED_MODULE_2__.goodsSetupWizardController)
> is not a function
>     at getProductTypeSetupWizard (productSetup.factory.js?cf3c:21:53)
>     at eval (productSetupWizard.component.js?532a:184:60)
>     at commitHookEffectListMount (react-dom.development.js?ac89:23150:1)
>     at commitPassiveMountOnFiber (react-dom.development.js?ac89:24926:1)
>     at commitPassiveMountEffects_complete (react-dom.development.js?ac89:24891:1)
>     at commitPassiveMountEffects_begin (react-dom.development.js?ac89:24878:1)
>     at commitPassiveMountEffects (react-dom.development.js?ac89:24866:1)
>     at flushPassiveEffectsImpl (react-dom.development.js?ac89:27039:1)
>     at flushPassiveEffects (react-dom.development.js?ac89:26984:1)
>     at commitRootImpl (react-dom.development.js?ac89:26935:1)

I'm using it this way:

import goodsSetupWizardController from '../components/managementInterface/shop/tabs/productSetupWizard/setups/goodsSetupWizard.controller';

export function getProductTypeSetupWizard(productTypeId, step, product = null) {
    //...
    switch(parseInt(productTypeId)) {
        case 1:
            // this is where the error is thrown:
            const controller = goodsSetupWizardController({ product: product, step: step });
    }
    //...
}

Am I doing something wrong?

Upvotes: 0

Views: 2362

Answers (1)

Bikram Karki
Bikram Karki

Reputation: 1181

There are a few rules on how we can use hooks (including custom hooks) in React. Here it mostly concerns two of them:

  1. hooks in React can not or should not be used inside control flow or conditional statements like if/else, switch cases, loops. The reason is, on every, render the hook needs to run like it did in the previous render (the order needs to remain the same).
  2. hooks can be called only inside of a functional component. getProductTypeSetupWizard where you are trying to use your custom hook is just a normal js function.

For eg.:

// this is bad
if(today === 'monday'){
  useCustomHook(() => {
    // your code here
  }, [...deps]);
}

// do this instead
useCustomHook(() => {
  if(today === 'monday'){
    // your code here
  }
}, [...deps]);

// Usages:

// this is bad
const normalFunction = (...args) => {
 const data = useCutomHook();

 // your code here doesn't return a JSX element
 return data.value;
}

// Do this instead
const Component = (props) => {
 const data = useCutomHook();
 
 // returns JSX element
return (<div>{data.value}</div>);
}

By convention custom hooks are named with use prefix, for eg.: useGoodsSetupWizardController.

More about it here https://reactjs.org/docs/hooks-rules.html#explanation.

Upvotes: 2

Related Questions