React: React Hooks are unable to queue to process

[AshifMohammad]

Steps To Reproduce

1. Create a Customer Hook

import { useContext } from "react";
import { SomeContext } from "src/SomeContext";

export const useCustomHook = () => {
  const {
    state: { deal }
  } = useContext(SomeContext);


const[contextVal, setContextVal] = useState("")

useEffect ( () => {  setContextVal( get(deal, "saleVehicle.pricing", {});) },[ deal])
  return contextVal;
};

useCustomHook.defaultProps = {
  deal: {},
  DealContext: {}
};

1. now Consume this hook into your component

import {useCustomHook} from "...relative path"

const salePrice = ({
  SomeContext: {
    state: { deal, shadowState },
  }
}) => {
//some handlers  - assume it working :D 
 const handleFocus = event => event.target.select();
  const handleOnBlur = ()=> { some call backs}
  });
  const handleOnChange = (ev, value) =>
    updateDeal(dispatch)({ target: { name: "salePrice", value } });

useEffect ( () => { useCustomHook(),[deal.id])

  return (
    <TextField
      value={deal.salePrice || vehSalePrice()}
      fullWidth
      onChange={handleOnChange}
      onBlur={handleOnBlur}
      disabled={hasOpenModal}
      quickEntry={quickEntryEnabled}
      decimalDigits={2}
      onFocus={handleFocus}
    />
  );
};

salePrice.propTypes = {
  DealContext: DealContextShape.isRequired,
};

salePrice.defaultProps = {

  deal: { price: "", Vehicle: { retailPrice: "" } },
  retailPrice: ""
};

3 - Once <SalePrice / > starts executing , It looks for the Hook useCustomHook but then useCustomHook internally calls another hooks useContext, useState, useEffect and while executing those hooks , it does not queue them up and screen blows up.

Describe what you expected to happen:

• React should handle the queue of hooks within and execute them as callStack does.

[peternycander]

You are breaking the rules of hooks "Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function"

[AshifMohammad]

I agree with the Rules, however, if i do call React Hook in a nested function i get clear message ### React Hook Violation Error Message

unlike the one I get?

[GasimGasimzada]

@AshifMohammad Could you please format the provided code. Use something like Prettier Playground, copy-paste your code there, and update your initial comment.

Now, on to the issue. You have several issues in this source code. First of all, I do not think that defaultProps parameter applies to custom hooks (correct me if I am wrong about this). So, this is wrong:

useCustomHook.defaultProps = {
  deal: {},
  DealContext: {}
};

Secondly, you cannot define a component with a camelCasing. It has to be PascalCase. Here is a quote from the [docs about ESLint plugin checks]:

Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).

So, your hooks are failing because React thinks that you are calling them inside of a regular function, not a React component.

Thirdly, this is wrong:

useEffect(() => {
    useCustomHook();
  }, [deal.id]);

You cannot call hooks from inside nested functions, especially inside other hooks.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[AshifMohammad]

Any update on this issue?

[gaearon]

What issue? As the comments say, the original example doesn't follow the Rules of Hooks. It's expected there might be errors in this case.