Can you re-use React elements across different renders and contexts?

Question

I've got a component like this:

const Foo = () => (
  <div>
    <h1>Hello world!</h1>
  </div>
)

Note that it doesn't take any props; it returns the same JSX on every render

Could this be used as just a constant instead of a function?

const Foo = (
  <div>
    <h1>Hello world!</h1>
  </div>
)

or will React have problems re-using the exact same React.createElement() result across re-renders and - more likely - in different DOM contexts throughout the app?

const OtherComponent = ({ ... }) => (
  <div>
    {Foo}
    {...}
  </div>
)

const OtherOtherComponent = ({ ... }) => (
  <span>
    {Foo}
  </span>
)

EDIT: It crossed my mind that any hooks getting called inside child components are probably going to get messed up by this, so it's probably a bad idea.

EDIT 2: Disregard the first "EDIT"; I tested it out and was surprised to find that a hook buried under the const react-node does actually get called multiple times. I'm leaning towards thinking this is indeed safe, but would still like confirmation from someone more familiar with React's internals.

You can do that fine, it's just when you use it instead of `` it's doing to be `{Foo}` — Jared Smith, Aug 27 '21 at 22:08
You're right about the syntax; I adjusted my sample code to match. However the question remains of whether or not this is reliably safe behavior. — Brandon Smith, Aug 27 '21 at 22:54
It's totally safe, it boils down to taste and preference. The perf difference is probably negligible. — Jared Smith, Aug 27 '21 at 23:05
The JSX is just a template for `React.createElement` to create as many DOM elements as it need be. — Lukman, Aug 27 '21 at 23:15
Anyway, duplicate of https://stackoverflow.com/q/61293107/34586 — Lukman, Aug 27 '21 at 23:18
It's not a duplicate. The question you link is using a const arrow function; my example is just a const holding a JSX expression (`React.createElement` result, as you note). The same question could be asked of the above replacing the JSX expressions with `React.createElement()` calls. — Brandon Smith, Aug 30 '21 at 16:11

ShevchenkoVV · Answer 1 · 2021-08-27T23:08:10.077

0

Sure you can use the just jsx assigned to a variable, if there are no complex stuff. Ref: for acknowledge

Updated with the POC:

edited Aug 27 '21 at 23:08

answered Aug 27 '21 at 22:09

ShevchenkoVV

131
5

It's interesting that they do this in an official example, though it still doesn't give me firm confirmation of the underlying question: is it safe to use this value in multiple places? In the example, it's implied that the `const` is only being used once. – Brandon Smith Aug 27 '21 at 22:57
As a pure code it will works the same. [Try it out here](https://babeljs.io/repl/#?presets=react&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA) – ShevchenkoVV Aug 27 '21 at 23:05

score 0 · Answer 2 · answered Aug 27 '21 at 22:14

This is just javascript. In first case, you create an object whose reference is not changed if you keep using it again and again.

In the other case its a function and everytime it is invoked, a new instance/object is returned.

A demonstration of the same,

const Comp1 = <div>Comp 1</div>;

const Comp2 = () => {
  console.log('rendering comp 2' + Math.random());
  return  <div>Comp 2</div>;
};

export default function App() {
  const obj1 = Comp1;
  const obj2 = Comp1;
  const obj3 = Comp1;

  console.log(Object.is(obj1, Comp1));
  console.log(Object.is(obj1, obj2));

  console.log(Object.is(obj2, Comp1));
  console.log(Object.is(obj2, obj3));

  return (
    <div>
      {obj1}
      {obj2}
      {obj3}
      <Comp2/>
      <Comp2/>
      <Comp2/>
    </div>
  );
}

It's not just about JavaScript, because the object held in the `const` is potentially mutable. The question is whether or not React mutates it once it's been handed off. — Brandon Smith, Aug 27 '21 at 22:43

Can you re-use React elements across different renders and contexts?

2 Answers2