rendering no falsy and

Never Use && with Potentially Falsy Values

Never use {value && } when value could be an empty string or 0. These are falsy but JSX-renderable—React Native will try to render them as text outside a `` component, causing a hard crash in production.

Incorrect (crashes if count is 0 or name is ""):

function Profile({ name, count }: { name: string; count: number }) {
  return (
    
      {name && {name}}
      {count && {count} items}
    
  )
}
// If name="" or count=0, renders the falsy value → crash

Correct (ternary with null):

function Profile({ name, count }: { name: string; count: number }) {
  return (
    
      {name ? {name} : null}
      {count ? {count} items : null}
    
  )
}

Correct (explicit boolean coercion):

function Profile({ name, count }: { name: string; count: number }) {
  return (
    
      {!!name && {name}}
      {!!count && {count} items}
    
  )
}

Best (early return):

function Profile({ name, count }: { name: string; count: number }) {
  if (!name) return null

  return (
    
      {name}
      {count > 0 ? {count} items : null}
    
  )
}

Early returns are clearest. When using conditionals inline, prefer ternary or explicit boolean checks.

Lint rule: Enable react/jsx-no-leaked-render from eslint-plugin-react to catch this automatically.