有条件地调用 React Hook “useCustomHook”。 在每个组件渲染中，必须以完全相同的顺序调用 React Hooks

Question

I got error when i want to set if in customHook Code

  if (dataValid) {
    const contactForm = useDataForm(onSubmit, modelToForm(dataValid));
  }

After this i got error ->

React Hook "useDataForm" is called conditionally. React Hooks must be called in the exact same order in every component render 

Problem is if statment when call this work good ( without if ) ->

 const contactForm = useDataForm(onSubmit, modelToForm(dataValid));

I wan't to load useDataForm ( custom hook ) if dataValid not valid and filled.

Answer 1

We can't call Hooks inside of conditionals, loops, or nested functions in order to ensure that Hooks are called in the same order each time a component renders. The order is important for how React associates Hook calls with components.

Resource: https://www.benmvp.com/blog/conditional-react-hooks/#:~:text=We%20can%27t%20call%20Hooks,associates%20Hook%20calls%20with%20components .

You can check this resource maybe it can be helpful

Answer 2

As per React documentation, you cannot call hooks conditionally .

Here is explained in depth why.

When the need to call a hook conditionally arises, you could opt for two soutions:

1. Either you call useDataForm and then you use contactForm only if dataValid is true

const contactForm = useDataForm(onSubmit, modelToForm(dataValid));
if (dataValid) {
    // do what you need to do with dataValid
}
// or 
return <Child data={dataValid ? contactForm : otherData} />

2. Either you move the hook in a separate component and render said component only if dataValid is true
3. Either, depending on the hook, you can pass the arguments conditionally. eg in your exemple:

const contactForm = useDataForm(onSubmit, dataValid   ? modelToForm(dataValid) : fallbackArg);