Handling JSX Return in Arrow Functions

A common mistake when using arrow functions in React is forgetting parentheses when returning JSX, which can lead to unexpected behavior or syntax errors. Here’s how to properly return JSX from arrow functions:

The Problem

Incorrect (implicit return without parentheses):

const MyComponent = () => 
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>;

This can cause issues because:

1. Automatic semicolon insertion might break your code
2. Multi-line JSX becomes ambiguous
3. May conflict with code formatters

Correct Solutions

1. Parentheses for Multi-line JSX (Recommended)

const MyComponent = () => (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

2. Explicit Return Statement

const MyComponent = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  );
};

3. Single-line JSX (No Parentheses Needed)

const Button = () => <button>Click me</button>;

When to Use Each Approach

Approach	Best For	Notes
Parentheses	Multi-line JSX	Cleanest syntax, avoids ASI issues
Explicit return	Components with logic	Required when you have other statements
Single-line	Simple components	Most concise but limited

Common Pitfalls

1. Forgetting Parentheses with Multi-line JSX

// ❌ Problematic
const Component = () =>
  <div>
    <span>Line 1</span>
    <span>Line 2</span>
  </div>;

// ✅ Fixed
const Component = () => (
  <div>
    <span>Line 1</span>
    <span>Line 2</span>
  </div>
);

2. Mixing Logic and JSX Without Braces

// ❌ Won't work
const Component = () => 
  const value = calculateValue();
  <div>{value}</div>;

// ✅ Correct
const Component = () => {
  const value = calculateValue();
  return <div>{value}</div>;
};

Advanced Patterns

1. Conditional Returns

const UserGreeting = ({ user }) => (
  user ? (
    <div>Welcome back, {user.name}!</div>
  ) : (
    <div>Please sign in</div>
  )
);

2. Higher-Order Components

const withLoading = (Component) => ({ isLoading, ...props }) => (
  isLoading ? (
    <div>Loading...</div>
  ) : (
    <Component {...props} />
  )
);

ESLint Rules

Consider adding these rules to enforce consistency:

{
  "react/jsx-wrap-multilines": [
    "error",
    {
      "declaration": "parens",
      "assignment": "parens",
      "return": "parens",
      "arrow": "parens"
    }
  ]
}