I would like wisdom again.

I am making a single page application with quite a bit of AXIOS calls, as you can see here.

useEffect(() => {

    axios.all([
      axios.request(options),
      axios.request(optionsQuote),
      axios.request(optionsDaily),
      axios.request(optionsNews)
    ],)
      .then(response => {
        setData(response)
      })

    console.log(data);
    
}, [tix])

My conundrum is that this runs every time I land on the page (for obvious reasons) and have to have an initial data in order for the app to run.

const [tix, setTix] = useState('AAPL')

I want to be able to land on a 'placeholder' type data, so to avoid the first initial call and only call when user searches and clicks on the company name, data. This function works fine after the page lands and initial stock (AAPL) is called. I want to not call it.

The problem is, I am trying to make a single page web app and would like to avoid using routes, if possible.

If I leave the initial state as blank (''), than, the code breaks since all of my data is derived from the fact that "data" has data in it.

const [data, setData] = useState(null)

Is the only way for me to get initial page without data showing is to make another component (such as 'landingPage')? If so, how do I go about doing that?