Being able to dynamically display data with {use()} is great, but it's also common to hide and show elements depending on data. The $if() macro helps you do that easily.

<div>
   {$if(condition,
       <div>rendered if true</div>,
       <div>rendered if false<div>,
   )}
</div>

Here's an example, using a button to show/hide an input field.

function App(){
    this.showInput = false;

    return (
       <div>
           <h1>Conditional Rendering!</h1>

           <button on:click={() => this.showInput = !this.showInput}>
                {use(this.showInput, show=>show ? "Hide Input" : "Show Input")}
           </button>
           
           {$if(use(this.showInput),
               <input placeholder="type here...." />
           )}
       </div>
    )
}