Каррируем React-компоненты: функциональные паттерны на фронтенде

[capfsb]

Я думаю, что я бы все таки предпочел в проекте видеть простой специализированный компонент, это всего на пару строчек больше, зато не нужно в голове держать новую абстрацию partialProps и понятно даже новичку что происходит. Например:

function ImportantRedButton(props) {
    return <Button
      color="red"
      size="large"
      variant="contained"
      {...props} 
    />;
  }

[AndreyVolfman]

Хорошая альтернатива, благодарю!

[Vitaly_js]

По моему, вы лукавите. Больше далеко не на пару строк. Вам придется вручную прописывать каждый интерфейс пропсов. А после, еще и сами пропсы.

Даже в таком предложенном примере - это заметный глазу оверхед.

У самого же решения порог вхождения для новичка в пределах разумного.

У предложенного решения в статье, на мой взгляд, есть несколько недоработок, ну или вариантов на подумать.

1. Невыразительное наименование. По сути, мы создаем фабрику, или компонент, но в названии этого нет.
2. Доработать утилиту, что бы в devtools она не отображалась как Anonymous

3. Может стоит добавить сразу создания семейства компонентов

Что-то типа:

type CreateConcreteFactory<P, Map extends Record<string, Partial<P>>> = {
  [Name in keyof Map]: FC<Omit<P, keyof Map[Name]>>
}
function createConcreteFactory <P, Map extends Record<string, Partial<P>>>(Component: FC<P>, map: Map) {

  return Object
    .entries<Partial<P>>(map)
    .reduce<Record<string, FC<P>>>((result, [name, currentProps]) => {

      return {
        ...result,
        [name]: (props: P) => <Component {...props} {...currentProps} />
      }
    }, {}) as CreateConcreteFactory<P, Map>
}

const { ImportantRedButtonThree, ImportantRedButtonFour }  = createConcreteFactory(Button, {
  ImportantRedButtonThree: {
    color: "red",
    variant: "contained",
  },
  ImportantRedButtonFour: {
    color: "red",
    size: "large",
    variant: "contained",
} as const)