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

338
Views
There is a way to call hooks conditionally in React?

I want to call a different hook according to a variable... this value comes from URL parameters and is dynamic, but hooks can't run conditionally according to Hook's rules:

Example

// this hook comes from react-router dom to get the URL params
const param = const { productType, accountId, statementId } = useParams();

// I need to run a hook that calls a different API according productType value
if (productType === 'someType') {
  return useHookOne(accountId, statementId)
} else if (productType === 'otherType') {
  return useHookTwo(accountId, statementId)
} else {
  return useHookThree(accountId, statementId)
}
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You need to create 3 others components for each scenario. In each component, you can add his own logic.

const param = const { productType, accountId, statementId } = useParams();

// I need to run a hook that calls a different API according productType value
if (productType === 'someType') {
  return <UseHookOne accountId={accountId} statementId={statementId} />
} else if (productType === 'otherType') {
  return <UseHookTwo accountId={accountId} statementId={statementId} />
} else {
  return <UseHookThree accountId={accountId} statementId={statementId} />
}

And then create 3 new components. Example with UseHookOne

import React from 'react'

const UseHookOne = (props) => {
  const data = useHookOne(props.accountId, props.statementId)
  return (<>Yay! Logic number 1 based on {data}</>)
}
export default UseHookOne
about 4 years ago · Juan Pablo Isaza Report

0

Hooks can't be called into function or conditions

Use hook in the root and put condition for each Hook.

Can you predict the purpose of your code? I think the logical design of the code should just be approached from a different angle

EDIT with Exemple:

// this hook comes from react-router dom to get the URL params
const param = const { productType, accountId, statementId } = useParams();

let apiRequest = new productRequestAPI();

if(prodType == "firstType"){
 apiQuest.adress = 'adress.api.com';
apiQuest.quest: 'firstRequest';
apiQuest.accountId ... etc
}
else if(prodType == "secondType"){
...
}

singleHook(apiRequest){
//Call API with good params and return after

}
about 4 years ago · Juan Pablo Isaza Report

0

you can make the useHookOne return a function that takes two arguments accountId and statementId .

const setHookOne = useHookOne()
const setHookTwo = useHookTwo()
const setHookThree = useHookThree()

if (productType === 'someType') {
  return setHookOne(accountId, statementId)
}else if (productType === 'otherType') {
  return setHookTwo(accountId, statementId)
} else {
  return setHookThree(accountId, statementId)
}
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!