ReactJS form control, display vs if else

Question

I am working on a big form with many branches. I am wondering if there is any performance difference between

 <Box display={type == type.RatioBased ? "none" : "flex"}>

and

{type == type.RatioBased ? "" : (<Box >......</Box>)}

Any suggestions helps

Answer 1

If you used the first choice you will populate the DOM with an unwanted component and that will lead to a bigger DOM and can slow the processing of the DOM.

In the second choice, the component Box will get removed from the DOM. It’s better to go with the second choice.