Discussion on: Clean Coding React - Props

The main not answered question here is those "many ways".

Many ways

• probably the initial "not clean" solution

const MadeUpCompo = (props: {
  size: Size
  variant: Variant
  thirdProperty: ThirdProperty
}) => {
  /* implementation of component */
}

• however probably it was even worse

const MadeUpCompo = (props: any) => {
  // good luck mate
}
MadeUpCompo.propTypes = {
  // and we are not using propTypes as well. Why should we?
}

• using React.FC

interface Props {
  size: Size
  variant: Variant
  thirdProperty: ThirdProperty
}

const MadeUpCompo: React.FC<Props> = ({ size, variant, thirdProperty }) => {
  /* implementation of component */
}

• using inline React.FC

const MadeUpCompo: React.FC<{
  size: Size
  variant: Variant
  thirdProperty: ThirdProperty
}> = ({ size, variant, thirdProperty }) => {
  /* implementation of component */
}

Lets check

• The declaration of the Props interface is always before the component. I find this cleaner than declaring the type of props inline which can become quite cluttered after a few properties.

Ok, no objections, however that's not that important.

• I always use the name Props for the interface so I never have to think for even a second about its name. One other pattern I see would be naming it MadeUpCompoProps but that's repetitive, longer, and I don't think it enhances clarity any more.

What about having more that one component in one file?

• Props are always destructured so you just use the size, variant, etc. identifiers, instead of writing something like props.size, props.variant, etc.

No brainer. I didn't get the point why it was even considered as possible

• Props are typed, I catch errors compilation time. I avoid using any for "typing" props

The same, why you could or should or may use any?

In other words

In other words - it was something very bad, and this is how to make it not that bad. However, you lost "the journey". You forgot to share the story itself.

This is not "Clean Coding React - Props" - it's a super tiny part of it, told without context.

One last thing should not be about type or interface. What about React.FC vs typing function arguments?