React native Question posted in
The official React Native documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

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

    use useLocalSearchParams or useGlobalSearchParams instead or useSearchParams it 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search