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 e across useLocalSearchParams and useGlobalSearchParams. What are the use cases for both? Which would therefore be better to use in my example above?

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 e across useLocalSearchParams and useGlobalSearchParams. What are the use cases for both? Which would therefore be better to use in my example above?

• javascript
• reactjs
• react-native
• expo-router

• 1 I don't see any useSearchParams hook in the docs, but I do see useGlobalSearchParams and a useLocalSearchParams hooks exported. If you want to learn about their differences see Use search parameters. – Drew Reese Commented Mar 30, 2024 at 0:04

3 Answers 3

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

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

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

import { Stack, useRouter, useLocalSearchParams, useGlobalSearchParams } from 'expo-router'

Using useLocalSearchParams or useGlobalSearchParams instead or useSearchParams will fix the error.

Results:

useGlobalSearchParams made the background screens re-render when the search params changed. It can cause performance issues if overused.

Global re-renders are executed in order of the stack, so the first screen is re-rendered first, then the user=charlie screen is re-rendered after.

useLocalSearchParams remained the same, even when the global search params changed. You can leverage this behavior for data fetching to ensure the previous screen's data is still available when you navigate back.

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()