Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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} />
  1. Either you move the hook in a separate component and render said component only if dataValid is true
  2. Either, depending on the hook, you can pass the arguments conditionally. e.g. in your exemple:
const contactForm = useDataForm(onSubmit, dataValid   ? modelToForm(dataValid) : fallbackArg);
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!