CODEWITHSUNDEEP
reactjsreact-native
Lilp
Lilp

Reputation: 971

Best practices for conditional rendering in react-native

I would like some advice as to the best practice when conditionally rendering an element or component in react-native. My question is when the conditional is not true is it better to return null or just run the if condition? I understand that if you return null then the lifecycle methods are still run but my concern is if i do not return anything is there an impact or performance difference?

Example One

renderText(name) {
  if(name === 'Abba') {
    return <Text>{name}</Text>
  }
}

Example Two

renderText(name) {
  if(name === 'Abba') {
    return <Text>{name}</Text>
  } else {
    return null
  }
}

Upvotes: 1

Views: 783

Answers (1)

Timothy Alfares
Timothy Alfares

Reputation: 317

I think conditional rendering like this might be better. 

renderText(name) {
  return (
    { name === 'Abby' &&
      <Text>
        {name}
      </Text>
    }
  )
}

Upvotes: 1

Related Questions