React refactor code #1

Actual code :

Refactor stage 1 (Make larger components in to small by creating small reusable components):

Refactor stage 2 (Don't use inline functions) :

Refactor stage 3 (Give proper naming to components, functions and variables):

Refactor stage 4 (Use spread and rest operators when you want pass multiple props to component):

If you feel this content is useful please share this article and give your reaction.

Thank you!!!

Follow me on

Linkedin : linkedin.com/in/saketh-kowtha

Twitter : twitter.com/sakethkowtha

Github : github.com/saketh-kowtha

Comments

[Christian Schulze]

I like the idea of refactoring, but I think step 4 using the object rest/spread operator to pass multiple props is an anti pattern. While prop spreading is convenient and saves typing, what specific props are being passed through? What props is <TextInput> supposed to support? If I needed to refactor <TextInput> using something other than <input> how would I know what props to support?

[sakethk]

Yes @christianschulze what you said is correct. rest/spread operator only suits for this example. My intention is first it will save typings and next i thought it is more readable. By seeing that snippet once can understand we are using label prop for label and rest of the props for input