I wonder if we can consolidate useTab and useFileTab into one hook. Does it make sense to have useTab return its own isLoading variable? Something like:

export const useTab = (tabKey = "file", defaultValue = ""): UseTabResult => {
    return {
        isLoading: value !== "",
        ....
    }
}

// in TemplateFilesPage component

const tab = useTab()

useEffect(() => {
    if (templateFiles && !tab.isLoading) {
      const terraformFileIndex = Object.keys(templateFiles).indexOf("main.tf")
      tab.set(terraformFileIndex !== -1 ? terraformFileIndex.toString() : "0")
    }
}, [tab, templateFiles])

Since useTab is getting used from other components I would not touch that. The isLoading, for now, is a specific thing from this page so that is the reason I created the useFileTab to handle this specific logic. If at some point we see this logic is something inherited for most of the tabs we have, I would consolidate them but not now tho.