Back to all comparisonsTechPref
React Component Patterns

JSX Boolean Shorthand vs Explicit ={true}

Should boolean JSX props use the concise shorthand form or always include the explicit ={true} value? See how top TypeScript projects handle boolean prop notation.

91%

Use Shorthand Boolean

9%

Use Explicit ={true}

Shorthand Boolean

Omit the value for boolean props — just write the prop name to mean true.

Code Example

Dialog.tsx (shorthand boolean)
interface DialogProps {
  open: boolean;
  closable?: boolean;
  modal?: boolean;
}

function Dialog({ open, closable, modal }: DialogProps) {
  return (
    <dialog open={open}>
      <Panel closable modal />
    </dialog>
  );
}

Key Benefits

  • Concise, less visual noise in JSX
  • Mirrors HTML boolean attribute style
  • Consistent with browser attribute syntax
  • Widely adopted in React codebases
  • Reduces repetition of ={true}
  • Default behavior in React for boolean props

Statistics

Explicit ={true}

Always write ={true} for boolean props to make the value explicit and consistent.

Code Example

Dialog.tsx (explicit boolean)
interface DialogProps {
  open: boolean;
  closable?: boolean;
  modal?: boolean;
}

function Dialog({ open, closable, modal }: DialogProps) {
  return (
    <dialog open={open}>
      <Panel closable={true} modal={true} />
    </dialog>
  );
}

Key Benefits

  • Explicit value makes intent unmistakably clear
  • Consistent with other prop assignments
  • Easier to find/replace true with a variable
  • Uniform style across boolean and non-boolean props
  • Avoids confusion about the prop's presence vs value
  • Simpler linting rules to enforce

Statistics

Additional Insights

More data points to help you make an informed decision for your team.

986

repositories analyzed