@snnsnn Thanks for the answer. It really cleared my concepts of how things are done by the compiler. Here is a brief for helping others as per my understanding and an extra example to try on Solid Playground:

import { render } from "solid-js/web";
import { createSignal, For } from "solid-js"

function Paragraph(props:{
  info:string
}){
  const {info} = props // reactivity breaks as we are unwrapping the getter function return  value into a static varibale;

  return <div style={{margin:"5px"}}>
    <p style={{"background-color": info}}>{info}</p> {/* as component loads only once info will cache the getter value during render satte only once*/}
    <p style={{"background-color": props.info}}>{props.info}</p> {/* reactivity will work as accesing a getter function that calls the singal for us. */}
  </div>
}

function App() {
  const [info,setInfo] = createSignal("red")

  return (
    <>
      <select
        value={info()}
        onInput={(e) => setInfo(e.currentTarget.value)}
      >
        <For each={["red","green","orange","pink","blue","yellow"]}>
          {(color) => <option value={color}>{color}</option>}
        </For>
      </select>
      {/* You can directly pass the singal call too solid will handle it by creating getters on the props object!*/}
      <Paragraph info={info()}/> {/* though passing string solid would still make it a getter function by itself*/}
      {/*
      Proof: _$createComponent(Paragraph, {
          get info() {
            return info();
          }
        }
      )
      */}
    </>
  )
}

render(() => <App />, document.getElementById("app")!);