I’m building a React application using client-side rendering and came across a situation where I need to fetch data inside a component. I’m tempted to declare my React component as an async function so that I can use await to handle the asynchronous operations directly. However, I’ve read in several places that it’s not a good practice to do this.

Could someone help explain why I shouldn’t declare a React component as an async function? What are the potential pitfalls of doing so, and what are the best practices for handling asynchronous code in React components?

Any examples or detailed explanations would be greatly appreciated!