Understanding and Resolving no-unused-expressions Error in ReactJS

Error Phenomenon and Background

During ReactJS development, developers frequently encounter the Expected an assignment or function call and instead saw an expression error message, which is triggered by ESLint's no-unused-expressions rule. This error typically occurs in scenarios where JSX syntax conflicts with JavaScript parsing rules.

Core Problem Analysis

Based on the code example in the problem description, the primary cause of the error lies in the formatting of the return statement:

render()
{
  return 
  (
    <div>
      <h1>The Score is {this.state.speed};</h1>
    </div>
  )
}

This writing style produces unexpected behavior in the JavaScript parser. Since the return keyword is immediately followed by a line break, JavaScript's automatic semicolon insertion mechanism considers the return statement complete, returning undefined, while the subsequent JSX expression is treated as an independent, unused expression, thus triggering the no-unused-expressions error.

Solution Approaches

The correct approach should place return and the returned JSX element on the same line, or use parentheses for wrapping:

// Approach 1: Same-line writing
render() {
  return (
    <div>
      <h1>The Score is {this.state.speed}</h1>
    </div>
  )
}

// Approach 2: Parenthesis starts on same line as return
render() {
  return (
    <div>
      <h1>The Score is {this.state.speed}</h1>
    </div>
  )
}

Related Scenario Extensions

Beyond basic return statement issues, the no-unused-expressions error commonly appears in several other scenarios:

Return Values in Arrow Functions

In arrow functions, if curly braces {} are used to define the function body, an explicit return statement must be used:

// Incorrect: Missing return
const Button = () => {
  <button>Hello world</button>
}

// Correct approach 1: Using return
const Button = () => {
  return <button>Hello world</button>
}

// Correct approach 2: Using parentheses for implicit return
const Button = () => (
  <button>Hello world</button>
)

Return Values in Array Map Methods

When using the map method to render lists, similar attention must be paid to return value handling:

// Incorrect: Missing return in map callback
{cart.map((cart_products, index) => {
  <span>{cart_products.id}</span>
})}

// Correct: Explicitly returning JSX element
{cart.map((cart_products, index) => {
  return <span>{cart_products.id}</span>
})}

// Or using implicit return
{cart.map((cart_products, index) => (
  <span>{cart_products.id}</span>
))}

Deep Understanding of JavaScript Parsing Mechanisms

To thoroughly understand this error, one must comprehend JavaScript's automatic semicolon insertion rules. When the parser encounters statements like return, break, or continue followed by a line break, it automatically inserts a semicolon, terminating the current statement. This explains why:

return
  <div>Hello</div>

Is actually parsed as:

return;
<div>Hello</div>;

Where <div>Hello</div> becomes an independent, unused expression, triggering the ESLint warning.

Best Practice Recommendations

To avoid such errors, developers are advised to:

1. Always place return and the return expression on the same line
2. Use parentheses for wrapping and maintain clear indentation when dealing with multiple JSX elements
3. Standardize code styles within teams to avoid mixing different return approaches
4. Configure ESLint rules for strict checking of such potential errors

Conclusion

Although the no-unused-expressions error appears simple, it involves core mechanisms of JavaScript syntax parsing. By understanding automatic semicolon insertion rules and JSX return value requirements, developers can avoid such common errors and write more robust React component code. Proper code writing habits not only eliminate warnings but also enhance code readability and maintainability.