If I want to get data from URL in component

[WreewanMorhee]

If I want to get data from URL in component ( not route component but other component )

It's better to pass from loader then pass to child
or
child use hooks to get it ? ( like useLocation, useParams )

I know both is okay
but I want to know which is better in Remix

[sergiodxa]

This is what I use depending on the origin of the data and where I’m accessing it https://sergiodxa.com/tutorials/access-loaders-data-in-remix

For your specific question about a component accessing route data, it depends if the component is shared between routes (use props) or unique to the route (use hook)

[WreewanMorhee]

I think my question is more like below, Which way is better to access url parameters for B component:
useParams()
or
pass from route component abc.cdf.tsx ?

routes/abc.cdf.tsx

export const loader = () => {}

export default function Index() {
  return <A />
}

components/A.tsx

export default function A() {
  return <div> <B /> </div>
}

components/B.tsx

export default function B() {
  return <div> {url_params} </div>
}

[sergiodxa]

If you want to get the route params (the ones part of the pathname) you can use the useParams hook in any component.

If you want to get the search params (the ones after ?) you can use the useSearchParams hook in any component.

[WreewanMorhee]

I know this, What I want to deep dive is:
In this case, use hooks will make efficiency lower ? because it's client side