CODEWITHSUNDEEP
reactjsreact-hooks
Kirency
Kirency

Reputation: 51

Using variables from react hooks to call another hook

I’ve seen a lot of discussion about conditionally calling hooks and why that is wrong, but is there any issue with using a variable returned by one hook to provide an action or data to another?

Example using graphql:

const form = useForm({ initialValues: { name: ‘’ }})
const { data } = useQuery(query, { onCompleted: (data) => form.setValues(data) })

Or another example using react router dom:

const { name } = useParams();
const { data } = useQuery(query, { variables: { name } })

The main reason for choosing to do this is to get rid of a useEffect if I don’t have to use one. The alternative would be to delay the call of the other hook until the query has finished by rendering it in a separate component which again, isn’t always ideal.

Are there any reasons why this is a bad idea or not best practice?

I generally prefer to keep my queries as the first hook called, but otherwise I can’t see why this would be incorrect.

Upvotes: 1

Views: 1665

Answers (1)

John Paul R
John Paul R

Reputation: 707

There is nothing wrong with using the output of one hook as the input of another in a general sense.

For certain hooks, this can lead to potentially unintentional (but not invalid) behavior. For example, if you passed the result of a query hook as the default value of a useState, the state value would not be set to the query result value when it eventually loads. (for that you'd have to useEffect + setState). This is an example of potential developer error though, not a React issue.

As far as React is concerned, passing the output of one hook as an input to another is perfectly fine and valid.

Upvotes: 1

Related Questions