Trying to avoid prop drilling with filtered list.

[sebastiaanviaene]

Hi, I have this situation:

• Parent Component (defines hooks, has 2 children components)
• Header component (sets filters & sorters)
• Content component (reads filtered content)

It kinda looks like this:

const ParentComponent = ({ filters, data, setFilters }): ReactElement => {
  const [filters, setFilters] = useState<string[] | undefined>();
  const { data } = useGetFilteredContent(filters);
  return (
    <>
       <Header filters={filters} setFilters={setFilters} />
       <Content data={data} />
    </>
  );
}

The useGetFilteredContent is my reusable react-query hook. I Include the filters into my queryKey in order for it to refetch every time a filter is updated.

I read somewhere that one should avoid prop drilling but I don't see a way how to do that in this case. If I would define the hook in the content component It wouldn't know about the filters set in the header component.

This is also true for all possible mutations I want to define. If I want to do optimistic updates on the filtered list it needs to know about the filters. Which means I have to define all mutation hooks in the parent component and pass it down 1-2-3 times until I arrive at my 'delete item button component' for example.

The more complex my application gets the more tedious the prop drilling gets. So I am looking for a way to avoid it.

[TkDodo]

I read somewhere that one should avoid prop drilling

I don't think that advice applies to every situation. passing props is the most explicit way of defining dependencies. I see nothing wrong with the above code. Yes, "drilling" props down over lots of layers ("lots" depends on your pain threshold) can become cumbersome.

To absolutely avoid it, you would have to make filters globally available, e.g. by putting it in a global client store like zustand. You could then make your hook depend on it:

const useGetFilteredContent = () => {
  const filters = useFilters()
  return useQuery(...)
}

where useFilters would subscribe you to the filters of your global store. But please, by all mean, keep thing simple :) If the above solution works fine for you, there is nothing to worry about imo

[vukadinFE]

It would be nice to have for example setQueryKey (similar to setQueryData) where you could pick which index of queryKey you want to update.
This way it will not eliminate just prop drilling but also any complications and boilerplates with state management.