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 errors. Here’s how to properly structure your arrow function returns.

The Problem

// ❌ Problem: Missing parentheses (implicit return issues)
const Component = () => 
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>;

This can cause problems because:

1. Automatic semicolon insertion might break your JSX
2. Multi-line JSX becomes ambiguous to JavaScript
3. Can lead to unexpected behavior with object literals

Correct Solutions

1. With Parentheses (Recommended)

// ✅ Correct: Parentheses wrap multi-line JSX
const Component = () => (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

2. With Explicit Return

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

3. Single Line (Parentheses Optional)

// ✅ Works for single line
const Button = () => <button>Click</button>;

When Parentheses Are Essential

1. Multi-line JSX:

   // ❌ Problematic
   const List = () =>
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
     </ul>;

   // ✅ Correct
   const List = () => (
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
     </ul>
   );

2. Returning object literals:

   // ❌ Returns undefined (curly braces interpreted as function body)
   const getConfig = () => { mode: 'dev', debug: true };

   // ✅ Correct
   const getConfig = () => ({ mode: 'dev', debug: true });

Best Practices

1. Always use parentheses for multi-line JSX returns
2. Be consistent within your codebase
3. Use explicit return when you need to add logic:

   const Greeting = ({ name }) => {
     const message = `Hello, ${name}!`;
     return <h1>{message}</h1>;
   };

4. Configure ESLint to catch these issues:

   {
     "rules": {
       "arrow-body-style": ["error", "as-needed"]
     }
   }

Common Pitfalls

1. Automatic semicolon insertion:

   // ❌ Might break
   const Component = () => 
     <div>
       Content
     </div>

   // Interpreted as:
   const Component = () =>;
   <div>Content</div>;

2. Object vs JSX confusion:

   // ❌ Returns undefined (interpreted as block)
   const Styles = () => { color: 'red' };

   // ✅ Returns JSX
   const Styles = () => <div style={{ color: 'red' }} />;

3. Missing return in curly brace version:

   // ❌ Forgot return statement
   const Component = () => {
     <div>Content</div>
   };

TypeScript Considerations

The same rules apply in TypeScript, but the compiler will often catch missing returns:

// TypeScript will error on missing return
const Component = (): JSX.Element => {
  <div>Content</div>; // Error: A function whose declared type is not 'void' must return a value
};

Remember: When in doubt, use parentheses for arrow function returns in JSX. They make your intent clear and prevent JavaScript parsing ambiguities.