2

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.

5
  • How do you define "better?" Dec 2, 2019 at 14:19
  • @RobertHarvey Edited the question and added that. But as better, I mean which one will be better when other person sees the code. Like, which one is cleanest code.
    – Vencovsky
    Dec 2, 2019 at 14:25
  • @RobertHarvey so you mean, it doesn't matter?
    – Vencovsky
    Dec 2, 2019 at 16:26
  • Readability is subjective, which means that other considerations take precedence. Which way seems most readable to you? Dec 2, 2019 at 16:27

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.