ReactJS - Different Component vs Conditional Rendering

Question

Let's say I'm building out a <TextInput /> component.

I have 3 variations. In variation #1, the label is above the textinput; in #2 the label is the placeholder and moves up when clicked; in #3 it's inside the input above the placeholder.

Question1: Performance wise, which method of having the 3 variations is faster in terms of load times in the UI - putting it all in one component with conditional rendering in the JSX everywhere and having a prop to toggle between the three variations, or having 3 totally separate components and then importing a TextInput object and calling a specific variation in this fashion <TextInput.VariationA />?

Question2: Does importing the full TextInput object somehow lag the component instead of just importing VariationA by itself? Say for example if there are 1000 components inside the main import (like when importing Icons).

// This TextInput has TextInput.VariationA 
// TextInput.VariationB and TextInput.VariationC
import TextInput from "myCustomTextInput"
// vs
import { VariationA } from "myCustomTextInput"

Aside performance thing(I don't think you will ever notice difference) it's much more flexible to have 3 different components(maybe with extracting common logic into re-used "input layout" that will never be directly imported elsewhere and/or some custom hooks for handling interactions). There are low-to-zero chance you will ever want to switch "type" from A to B in the middle. And if it's single component - yes, with conditional rendering - it still harder to maintain, things that looked as "common part" initially will become more and more different. Having all in single place restricts you. — skyboyer
– skyboyer, Commented Feb 28, 2022 at 22:48
@skyboyer Thanks for your answer. I used to do it all in one single component and this is what I'm finding exactly... it's very cumbersome to read and maintain and I was thinking of doing it the 3 component way as you suggested. I also never thought about considering props that aren't conditional to be a different component (specifically like in this case), all great thoughts. Thank you. — wongx
– wongx, Commented Feb 28, 2022 at 22:55

Srhtuzbs · Accepted Answer · 2022-02-28 23:00:19Z

1

I don't think performance is going to problem, but I suppose you would handle it three different class with one component. You can give classnames via props where form component is used. And three different css styling will probably works.

I haven't try it before but I think it might works.

answered Feb 28, 2022 at 23:00

Srhtuzbs

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS - Different Component vs Conditional Rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related