CODEWITHSUNDEEP
javascriptreactjs
lightPT
lightPT

Reputation: 58

Rendering React components via object literal

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

And more specific about option #1:

// 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>

Upvotes: 0

Views: 991

Answers (1)

Rondley Greg&#243;rio
Rondley Greg&#243;rio

Reputation: 31

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.

Upvotes: 2

Related Questions