CODEWITHSUNDEEP
reactjsreact-hooks
Gerald H
Gerald H

Reputation: 618

React Hooks name clash how to resolve?

I been using multiple hooks to manage my data in React and I had an issue in which that multiple hooks uses the same variable name.

   const { data } = useCompetitors();
   const { data } = useCompetitorGroups();

enter image description here

This results in error! What are the best practices I can do to resolve this? Using array? Or is there a way to check the naming here.

Upvotes: 1

Views: 369

Answers (3)

Lin Du
Lin Du

Reputation: 102287

I prefer not to use destructuring assignment and binding and assignment. Keep a namespace or context for the data.

const competitors = useCompetitors();
const competitorGroups = useCompetitorGroups();

// ...
console.log(competitors.data);
console.log(competitorGroups.data);

Upvotes: 1

BlueBeret
BlueBeret

Reputation: 607

This is a reason why most hook should return an array instead of objects. However if the hook return an object you can use renaming in the destruction:

   const { data:competitior_data } = useCompetitors();
   const { data:competitior_group } = useCompetitorGroups();

Answer stolen from here

Upvotes: 1

hgb123
hgb123

Reputation: 14891

You could use aliases to handle this case

const { data: data1 } = useCompetitors();
const { data: data2 } = useCompetitorGroups();

References

Binding and assignment

Upvotes: 2

Related Questions