mercredi 10 mars 2021

JSX vs Component reference as value type

I have a requirement to render a specific component based on params. I have two solutions in mind.

Solution 1:

export const getForm = () => {
  const { name } = useParams();

  const ComponentMap = {
    account: <Account />,
    contact: <Contact />,
  };

  return ComponentMap[name];
};

Solution 2:

export const getForm = () => {
  const { name } = useParams();

  const ComponentMap = {
    account: Account,
    contact: Contact,
  };

  return <ComponentMap[name] />;
};

I am more inclined to solution 2 as it won't create JSX elements for all the map values.

What's the standard pattern in React world. Can someone help me in deciding an approach?

Aucun commentaire:

Enregistrer un commentaire