<!--
title: prefer explicit readable constructs
domain: app-frameworks
topic: Code Style
language: TSX
source: remix-run/react-router
updated: 2025-04-24
url: https://awesomereviewers.com/reviewers/react-router-prefer-explicit-readable-constructs/
-->

Choose explicit and semantic code constructs that enhance readability over more concise but less clear alternatives. This improves code maintainability and reduces cognitive load for developers.

Key practices:
- Use ternary operators instead of `&&` in JSX to make the conditional logic explicit and avoid potential rendering issues
- Use semantic methods like `endsWith()` instead of manual string indexing operations
- Structure complex conditionals with clear if/else branches rather than nested ternaries when there are multiple conditions

Example transformations:
```jsx
// Avoid: && operator in JSX (can cause rendering issues)
{ENABLE_DEV_WARNINGS && heyDeveloper}

// Prefer: explicit ternary
{ENABLE_DEV_WARNINGS ? heyDeveloper : null}

// Avoid: manual string operations
toPathname[toPathname.length - 1] === "/"

// Prefer: semantic methods
toPathname.endsWith("/")
```

This approach makes code intentions clearer, reduces the chance of subtle bugs, and makes the codebase more accessible to developers of varying experience levels.
