Forgetting parentheses when returning JSX inside an arrow function

A common React mistake is omitting parentheses when returning JSX from an arrow function, which can lead to unexpected behavior or syntax errors.

The Problem

When you forget parentheses in arrow functions returning JSX:

// ❌ Problematic - may cause issues
const Component = () => 
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>;

This can cause problems because:

1. Automatic semicolon insertion might break your code
2. Multi-line JSX becomes harder to read and maintain
3. Some tooling might misinterpret your intent

Correct Solutions

1. With Parentheses (Recommended)

// ✅ Correct - with parentheses
const Component = () => (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

2. With Explicit Return

// ✅ Correct - with explicit return
const Component = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  );
};

3. For Single-Line Returns

// ✅ Correct for single-line
const Button = () => <button>Click me</button>;

Why Parentheses Matter

1. Prevents Automatic Semicolon Insertion (ASI) Issues:

   // ❌ Dangerous without parentheses
   const Component = () => 
     <div>
       Content
     </div>;  // ASI might cause problems here

2. Improves Readability:

• Parentheses clearly demarcate the JSX block
• Easier to distinguish from regular JavaScript

2. Consistent Formatting:

• Works well with Prettier and other formatters
• Makes multi-line JSX more maintainable

Common Mistakes

1. Mixing styles inconsistently:

   // ❌ Inconsistent style
   const ComponentA = () => <div>A</div>;
   const ComponentB = () => 
     <div>B</div>;

2. Forgetting parentheses when adding props:

   // ❌ Easy to mess up
   const Component = () => 
     <div className="container">
       Content
     </div>;

3. Confusing object literals with JSX:

   // ❌ Might confuse with object
   const Wrong = () => { title: 'Hello' };  // This is an object, not JSX

Best Practices

1. Always use parentheses for multi-line JSX returns
2. Be consistent throughout your codebase
3. Use Prettier to automatically format your code
4. Consider curly braces + return for components with complex logic

// ✅ Good practice for complex components
const UserProfile = ({ user }) => {
  const formattedName = `${user.firstName} ${user.lastName}`;

  return (
    <div className="profile">
      <h2>{formattedName}</h2>
      <p>{user.bio}</p>
    </div>
  );
};

Remember: While JavaScript allows omitting parentheses in some cases, using them consistently with JSX makes your code more reliable and maintainable.