React-Native: useSearchParams hook from 'expo-router'

Question

I am a beginner learning react native. I want to use the useSearchParams hook from 'expo-router', but I get the error message: error: TypeError: 0, _expoRouter.useSearchParams is not a function (it is undefined)

So maybe the useSearchParams hook doesn't exist anymore (I am following this from a tutorial).

This is my code:

import { Stack, useRouter, useSearchParams } from 'expo-router'

const JobDetails = () => {
  // get specific ID of job details page we are on
  const params = useSearchParams();
  const router = useRouter();

  const { data, isLoading, error, refetch } = useFetch("job-details", {
    job_id: params.id,
  })

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite}}>
      <Stack.Screen></Stack.Screen>
    </SafeAreaView>
  )
}

export default JobDetails

Am I correct in thinking that useSearchParams doesn't exist anymore? If so, I have come across useLocalSearchParams and useGlobalSearchParams. What are the use cases for both? Which would therefore be better to use in my example above?

Answer 1

useLocalSearchParams Returns the search parameters for the current component. It only updates when the global URL conforms to the route. useGlobalSearchParams Returns the global URL regardless of the component. It updates on every search param change and might cause components to update extraneously in the background.

the only difference is how frequently they update and i recommend useLocalSearchParams

read more here: https://docs.expo.dev/router/reference/search-parameters/

Answer 2

I think you're following the same tutorial as me. :)

It looks like useSearchParams() has been deprecated, and can be replaced by either useLocalSearchParams() or useGlobalSearchParams()