ReactJs - Creating an “If” component… a good idea?

Question

I\'ve read in the React docs that \"if\" type statements can\'t be used in JSX code, because of the way JSX renders into javascript, it doesn\'t work out as one would expect

Answer 1

I think your main question is not "Can I implement an If component" (because clearly you can), but "Is there any reason why implementing an If component is a bad idea?"

The main reason it's a bad idea is because an adds component render cycles to what would otherwise be a small amount of code in an existing component. The extra component wrapper means that React needs to run an entire extra render cycle on its children. This is not a big deal if the If component is only used in one place, but if your app is littered with them, you've just made your UI that much slower.

Similar to how:

Hi

is more efficient than

Hi

.