Declaring never changing variable inside or outside component-CodePudding

I've 2 examples. Main difference is declaring some variable inside and outside component. Component itself changes state. So declaring never changing (neither state or prop dependent) variable outside component can save some memory, re-creating, or something? Or either option completely fine?

Option A

import React from 'react';

const menu = [
  { slug: '/a', label: 'Label A' },
  { slug: '/b', label: 'Label B' },
  { slug: '/c', label: 'Label C' },
];

const Example = () => {
  const [show, setShow] = React.useState(false);

  return (
    <div>
      <button type="button" onClick={() => setShow(!show)}>
        toggle show
      </button>
      {show && (
        <div className="menu">
          {menu.map((m) => (
            <a key={m.slug} href={m.slug}>
              {m.label}
            </a>
          ))}
        </div>
      )}
    </div>
  );
};

export default Example;

Option B

import React from 'react';

const Example = () => {
  const [show, setShow] = React.useState(false);

  const menu = [
    { slug: '/a', label: 'Label A' },
    { slug: '/b', label: 'Label B' },
    { slug: '/c', label: 'Label C' },
  ];

  return (
    <div>
      <button type="button" onClick={() => setShow(!show)}>
        toggle show
      </button>
      {show && (
        <div className="menu">
          {menu.map((m) => (
            <a key={m.slug} href={m.slug}>
              {m.label}
            </a>
          ))}
        </div>
      )}
    </div>
  );
};

export default Example;

CodePudding user response：

A is indeed slightly better - in B, the menu array of objects is created every single time the Example re-renders.

That said, unless the object structure is unreasonably huge, and the component re-renders quite frequently, it's quite unlikely to have any noticeable impact at all.

CodePudding user response：

Although the Babel transpiled version of the code may present an optimization and performance boost, in the object recreation phase (which is really FAST by itself), you must take look at final output which is processed by the browser.

Nowadays using modification at end of your build process is an essential thing, although they might differ in the first transpired version (e.g. via babel), there are some cases where webpack embed outside variables directly by defined variables in the modification process

I believe when you consider these types of changes, you must not do it for performance benchmark. There are other reasons I think one might do this thing something like typing rtl inside your JSX, or doing this because of your project code structure (trying to organize things)

const t = {
  Hello: 'سلام',
  // Other translations related to this feature component...
}
// the better option is absolutely a i18n, but I want to example for what I mentioned
const Hello = () => <span>{t.Hello}</span>