Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

270
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda