results.tsx

// Browsers.tsx

export function Browsers() {
  return <BrowsersList {...useBrowsers('https://google.com/myData.json')} />
}

// useBrowsers.ts

export function useBrowsers(url: string): BrowsersListProps {
  const {loading, data} = useFetch<FetchBrowsersResults>(url)
  const [selectedBrowser, setSelectedBrowser] = useState<Browser | undefined>(
    undefined,
  )

  return {
    loading,
    browsers: data?.Browsers,
    selectedBrowser,
    setSelectedBrowser,
  }
}

// BrowsersList.tsx

export function BrowsersList(props: BrowsersListProps) {
  const {loading, selectedBrowser, setSelectedBrowser, browsers} = props
  return (
    <View style={styles.container}>
      <AddModal
        modalVisible={Boolean(selectedBrowser)}
        onClose={() => setSelectedBrowser(undefined)}
        description={selectedBrowser?.description}
      />
      <UIFriendlyList
        loading={loading}
        data={browsers}
        renderItem={({item}) => (
          <BrowserItem
            key={item.fullname}
            browser={item}
            onPress={() => setSelectedBrowser(item)}
          />
        )}
      />
    </View>
  )
}