React Hooks name clash how to resolve?

gerald heng 0
Viewed 26

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.

react-hooks reactjs
3 Answers

You could use aliases to handle this case

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

References

Binding and assignment

hgb1230

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

BlueBeret0

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);
slideshowp20
Related