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.
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.
You can check this resource maybe it can be helpful
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 :
useDataForm and then you use contactForm only if dataValid is trueconst contactForm = useDataForm(onSubmit, modelToForm(dataValid));
if (dataValid) {
// do what you need to do with dataValid
}
// or
return <Child data={dataValid ? contactForm : otherData} />
dataValid is trueconst contactForm = useDataForm(onSubmit, dataValid ? modelToForm(dataValid) : fallbackArg);