What is the correct way of conditionally rendering a (sub)component?

[sinanspd]

I apologize if this is a silly question. I am trying to put together a Shopify app. There is a product creation flow, I want the form fields for the product details (name, price, pictures etc.) to render after a ResourcePicker returns (the user finishes selecting).

My initial intuition was to create a function and then put an if statement in it.

function GetInfoFields(){
    if(...){
      return  (
        <TextField 
          label="... "
          value={title} 
          onChange={changeTitle} />
      );

I noticed that the TextField loses focus after each character. Per this stackoverflow question
this happens because the function is evaluated every time the state changes, and after each render, the textfield gets rendered unfocused.

One workaround is to wrap all of that in a div with display: none and once ResourcePicker returns a value, getElementById and update the display style manually. While this works, I was wondering if there is a recommended way (built in way in Polaris) of doing these kind of conditional renders ?