Is conditional rendering of React components instead of performance while preserving markup?

Question

This is what makes sense in my head, but I could not find any facts / articles to support this.

Essentially something like

render() {
  return (
    someBoolean && <div>Some Markup</div>
  )
}

less effective than

render() {
  return (
    someBoolean && <SomeComponent />
  )
}

where it SomeComponenthas the exact same markup as the previous example.

My reasoning is that the markup should be created with every re-rendering, it will take more memory, while the saved component SomeComponentwill be referenced in memory and will not be created at each re-rendering, rendering.

Is there somewhere in the reaction documents that explain this in more detail?
Or is this reasoning inaccurate?

Answer 1

JSX React.createElement. Babel REPL,

return someBoolean && React.createElement(
  "div",
  null,
  "Some Markup"
);

return someBoolean && React.createElement(SomeComponent, null);

.

someBoolean , React.createElement render -op.

SomeComponent , . , , :

const SomeComponent = () => <div>Some Markup</div>;

.

Answer 2

, , &&, someBoolean .

, React JSX, . , .

, , shouldComponentUpdate . JSX .