Responsive rest countries SPA built with viteReact and charka uI

You can use .filter() function to implement search & filter region instant of fetching API.

There are four conditions would happen: 1 ) searchWord === "" and region === "" (no search keyword and region selected) 2) searchWord !== "" and region === "" (have keywords and no region selected) 3) searchWord === "" and region !== "" (no keywords and have region selected) 4) searchWord !== "" and region !== "" (both exist)

First, put SearchBar.jsx and RegionFilter.jsx business logic to upper level so you can share the state value with other components. For instance, in Home.jsx:

  const [searchTerm, setSearchTerm] = useState("");

....

return (
 .....
<SearchBar setSearchTerm={setSearchTerm} searchTerm={searchTerm}/>
)

Then, you can create a new value and filter function to return the filtered value. To prevent unwanted rerending use useMemo add dependencies searchTerm, listOfCountries, filterRegion

const getFilterData = ({ listOfCountries,
    searchTerm,
    filterRegion}) => {

return listOfCountries.filter(data => {
if (searchTerm === data.name.split(" ").join("") ){
return true
}
......
})
}
  const filteredData = useMemo(() => getFilterData({
    listOfCountries,
    searchTerm,
    filterRegion
  }), [listOfCountries, searchTerm, filterRegion]);


return (
 ...

)

To get the country name you can use an object to map it :

const hashMap = {
 countryCode: CountryName
}

......


return (
 ....

{
borderCountries.map(item => (
<div>{hashMap[item]}</div>
))

}
)

hello ibrahim, congratulations for completing this challenge I don't know much about react but I got a glimpse in your code and this is what I can say about your specific preoccupations:

you can't really do much to improve the time needed to fetch data from the api unless you reduce the amount of data you request, this is achievable by requesting the data by region starting with the region with the smallest amount of data (oceania in your case) then updating the view with those data before fetching the data for the other regions, that way the user will start interacting with your app very quickly (less than 3 second when you request countries from oceania first)

to get the whole country's name for borders you'll use the borders array that the api provides, because this are cca3 codes, you can pass it as a parameter to the following function

 const getBordersNames = function (arrayOfBordersCca3Codes, countries) {
    if (arrayOfBordersCca3Codes) 
        return countries
            .filter((country) => arrayOfBordersCca3Codes.includes(country.cca3))
            .reduce(
                (arrayOfBordersNames, currentObject) =>
                    arrayOfBordersNames.concat(currentObject.name.common),
                []
            )
    else return null
}

hope it helps