Render constant props components from an object or by hand?

Question

Lets say I have a component that render some "static" information and another one that is the parent of these components.

function Foo(){
    ...
    return (
        <Bar name="I" {...otherPropsThatChangeFromEachChildren} />
        <Bar name="am" {...otherPropsThatChangeFromEachChildren}/>
        <Bar name="a" {...otherPropsThatChangeFromEachChildren}/>
        <Bar name="children" {...otherPropsThatChangeFromEachChildren}/> 
    )
}

The Bar component have props that are static, I will write it in the code, never change and never use in other place.

And here is what confuses me.

Should I have all that static information in an array of objects and render with with .map

e.g.

const staticProperties = [
    {
        name: "I",
        ...
    },
    ...
]

function Foo(){
    ...
    return (
        staticProperties.map(x => 
            <Bar name={x.name} {...x.otherPropsThatChangeFromEachChildren} />
        )
    )
}

Or just do like the first example

function Foo(){
    ...
    return (
        <Bar name="I" {...otherPropsThatChangeFromEachChildren} />
        <Bar name="am" {...otherPropsThatChangeFromEachChildren}/>
        <Bar name="a" {...otherPropsThatChangeFromEachChildren}/>
        <Bar name="children" {...otherPropsThatChangeFromEachChildren}/> 
    )
}

This is a common thinig that I always think but never know which one is better for maintaining the code and which one is a better to read code.

Answer 1

TLDR: Great question; use a const.

I agree, this comes up every now and again. Sometimes even often, depending on the project. That being the case, finding a good way handle this type of situation is a great thing; effective practices, applied consistently, are a boon to the readability and maintainability of a codebase.

The approach I generally use is to render it once as a const.

The rendered JSX doesn't change, so you don't need a component for it. You can save it as a const and then use it however many times you want. This works fine as long as it actually is static (no lurking state, no mutation, etc.).

In the snippet, below, the default export of linkList.js is a completely static <ul>.

// linkList.js
import React from "react";

const linksData = [
  {
    text: "GitHub",
    href: "https://github.com/tiffon"
  },
  {
    text: "Stack Overflow",
    href: "http://stackoverflow.com/users/1888292/tiffon?tab=answers"
  }
  // etc.
];

export default (
  <ul>
    {linksData.map(({ text, href }) => (
      <li key={href}>
        <a href={href} target="_blank">
          {text}
        </a>
      </li>
    ))}
  </ul>
);

(I used the array and .map() approach, but that really depends on the situation. I can elaborate on the factors, if that's of interest.)

The static JSX is used the same way you would use any variable.

// App.js
import React from "react";
import linkList from "./linkList";  //     <----
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {linkList} {/*      <----      */}
    </div>
  );
}

Here is a Code Sandbox: https://codesandbox.io/s/stack-soft-eng-401938-const-jsx-95g5i