Rendering React components via object literal

Question

Are there any downsides performance wise, to render react components like these options?

And more specific about option #1:

• Would it be better to place the icons object outside of the function, maybe even outside of the component?

// option #1
const renderIcon = iconName => {
   const icons = {
       iconX: <IconX />,
       iconY: <IconY />,
       iconZ: <IconZ />,
   };
   return icons[iconName];
};

return <div>{renderIcons('iconX')}</div>


// option #2
const icons = useMemo(() => ({
    iconX: <IconX />,
    iconY: <IconY />,
    iconZ: <IconZ />,
}), [props.iconName]);

return <div>{icons[props.iconsName]}</div>

Answer 1

Speaking of performance, there is a downside since the functions of all components will be executed, including components that are not rendering. Although readability is worse, from a performance perspective it would be better to do a switch or ternary rendering.