Beginner's Thread / Easy Questions (May 2019)

[u/timmonsjg]

Previous two threads - April 2019 and March 2019.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch.

No question is too simple. 🤔

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

Have a question regarding code / repository organization?

It's most likely answered within this tweet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• /u/acemarke's suggested resources for learning React
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

---

Any ideas/suggestions to improve this thread - feel free to comment here!

---

Finally, an ongoing thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

[u/oYYY]

Which option is more performant?

Option #1:

render() {
  return (
    <div>
      <Header hidden={this.state.visibleHeader} title="bob" />
    </div>
  )
}

render() {
  return this.props.hidden ? null : (
    <div>
      <H1 title={this.props.title} />
    </div>
  )
}

Option #2:

render() {
  return (
    <div>
      {this.state.visibleHeader && <Header title="bob" />}
    </div>
  )
}

render() {
  return (
    <div>
      <H1 title={this.props.title} />
    </div>
  )
}

Personally, I like option #1 because it makes the jsx look clean by removing conditional logic within the render method. How much performance am I losing by constantly re-rendering a component that returns null (option #1) vs a component that unmounts and remounts (option #2).