Use component function in React loop

Question

I heard that () is not good at the rendering performance so it should not be used. However, in this case, it can not get the results when passing the function without ().

You can check the reseult in CodeSendbox: Link

const comp = () => {
  return <div>This is Component</div>;
};

const elements = [comp(), comp];  // Please Attention This Line!
const items = [];

for (const [index, value] of elements.entries()) {
  items.push(
    <div>
      {index}: {value} <br />
    </div>
  );
}

export default function Index() {
  return <>{items}</>;
}

Result is:

0:
This is Component

1:

Why only comp() but not comp? What is the best practice in this case?

you are passing a executed function and function reference in an array const elements = [comp(), comp]; why? — NiRUS
– NiRUS, Commented Mar 18, 2020 at 7:10
It's just an example of explaining. I think I have to use comp but it's not working. And I tried comp(), it returns what I want. — Centell
– Centell, Commented Mar 18, 2020 at 7:17

hiddenuser.2524 · Accepted Answer · 2020-03-18 07:35:27Z

1

You can use JSX instead of calling the function:

const comp = () => {
  return <div>This is Component</div>;
};

const elements = [comp, comp];  // Remove the function call, save only the reference
const items = [];

// need to use Value with V instead of v for JSX
for (const [index, Value] of elements.entries()) {
  items.push(
    <div>
      {index}: <Value/> <br /> // render as JSX
    </div>
  );
}

export default function Index() {
  return <>{items}</>;
}

Here's a sandbox link showing how it works: https://codesandbox.io/s/cranky-mclean-7ymzr

answered Mar 18, 2020 at 7:35

hiddenuser.2524

5,0081 gold badge19 silver badges22 bronze badges

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

2 Comments

Centell Over a year ago

It works! I tried <value /> but it not working. but your <Value /> is working! lol

Drew Reese Over a year ago

@Centell React should components always start with a capital letter. reactjs.org/docs/glossary.html#components

Drew Reese · Accepted Answer · 2020-03-18 07:17:33Z

1

comp is an arrow function that returns a JSX literal. It's a "function" that is stored in a variable called comp. When called/invoked as comp(), notice the parenthesis, it is executed and the computed return value is returned in the array. When used without the parenthesis, like comp, this is simply the reference to the variable (that can be invoked like a function).

Functions aren't valid react children nor valid JSX.

Introducing JSX

const comp = () => {
  return <div>This is Component</div>;
};

const elements = [comp(), comp];  // saves a JSX literal, and a function
const items = [];

for (const [index, value] of elements.entries()) {
  items.push(
    <div>
      {index}: {value} <br /> // trying to render a function here in `value`
    </div>
  );
}

export default function Index() {
  return <>{items}</>;
}

I assume you got the idea () is "not good at rendering performance" from some documentation about in-line anonymous arrow functions and event handlers and mapping an array of data. That is a different issue altogether. I believe your situation is just a misunderstanding about how arrow functions are invoked.

edited Mar 18, 2020 at 7:17

answered Mar 18, 2020 at 7:10

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

2 Comments

Centell Over a year ago

Thanks for your explain! My example code is the simplify but my real problem is more flexible. My real comp functions have some graphs and tables. There is no problem in this case..?

Drew Reese Over a year ago

If calling them as functions (as expected) isn't causing any immediate issues then no, probably not a problem. React is generally performant and it isn't until you start generating very large virtualDOM trees and do bad anti-patterns that performance/optimizations may need to be looked at.

Collectives™ on Stack Overflow

Use component function in React loop

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related