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.

CodePudding user response：

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 can't call Hooks,associates Hook calls with components.

You can check this resource maybe it can be helpful

CodePudding user response：

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. e.g. in your exemple:

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