CODEWITHSUNDEEP
javascriptreactjsjsx
user3309314
user3309314

Reputation: 2543

React stateless components

Let's say I have a component for lists rendering and I can do it in two different ways.

The first one:

const renderItem => item => <li>{item}</li>;

const List = ({ items }) => (
  <ul>
    {items.map(renderItem)}
  </ul>
);

And the second one:

const List = ({ items }) => {
  const renderItem => item => <li>{item}</li>;

  return (
    <ul>
      {items.map(renderItem)}
    </ul>
  );
};

What is the difference between these approaches? I mean performance, renderings count, best practice or anti-pattern, etc.

Upvotes: 0

Views: 57

Answers (1)

nitte93
nitte93

Reputation: 1838

Performance wise there will be no difference. The only concern here is regarding the scoping of the renderItem. Since it is enclosed inside List in your second example, it's availability is limited to the scope of List.

Generally, You would want to make such a component a reusable one. In such a case making it globally accessible makes more sense.

Upvotes: 1

Related Questions