Best practices for conditional rendering in react-native

Question

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
  }
}

For the topmost element it is a good practice to either return some JSX or null, i.e return name === 'Abba' ? <Text>{name}</Text> : null. If it is inside of some JSX, you can use the && operator instead, i.e name === 'Abba' && <Text>{name}</Text>. — Tholle
– Tholle, Commented Aug 6, 2018 at 3:26

user10150718 · Accepted Answer · 2018-08-06 05:49:39Z

1

I think conditional rendering like this might be better.

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

answered Aug 6, 2018 at 5:49

user10150718

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Best practices for conditional rendering in react-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related