DEV Community

Discussion on: 7 code smells in your React components

almostconverge profile image
Peter Ellis

Thank you, that's a neat collection of arguably fishy-smelling patterns.

There is one I haven't quite made up my mind about, and that's something like this:

function SomeComponent(props) {
    const someMoreProp = // calculate some extra stuff
    return <>
         <OtherComponent {...props} moreProp={someMoreProp}/>
Enter fullscreen mode Exit fullscreen mode

I do find this pattern quite useful when I've got different variants of a component (for example a text and a number input component), but I want to expose it as just a single GenericInput component.

But it doesn't feel right.

awnton profile image
Anton Gunnarsson Author • Edited on


If it works it's works, so to speak :) Your example is close to writing a Higher-order component but it depends on the use case. A lot of HOCs use cases however (just as render props) have been replaced by hooks instead, and should probably be the default moving forward unless you have a special use case ^^