Czy powinienem użyć tutaj kontekstu w React?

Zastanawiam się co powinno się stać aby koniecznym było użyciu kontekstu.

Zakładając, że mam główny komponent o nazwie Dashboard. W tym komponencie wyświetlam np. torby i plecaki. Torby i plecaki to oddzielne komponenty, które znajdują się w komponencie Dashboard. Chciałbym zrobić paginację dla plecaków i toreb. W komponencie plecaków potrzebuje aktualnego stanu co do aktualnej strony paginacji oraz stanu co do ogólnej ilości stron plecaków. Takich samych stanów potrzebuje w przypadku toreb. Dodatkowo te wszystkie stany są mi jeszcze potrzebne w komponencie Dashboard.

Mogę te wszystkie stany zrobić w komponencie Dashboard: currentPageBag, setCurrentPageBag, pagesBag, setPagesBag, currentPageBackpack, setCurrentPageBackpack, pagesBackpack, setPagesBackpack.

Wtedy do komponentu zawięrającego torby przekazałbym propsy takie jak currentPageBag, setCurrentPageBag, pagesBag, setPagesBag, a do komponentu zawierającego plecaki takie propsy jak currentPageBackpack, setCurrentPageBackpack, pagesBackpack, setPagesBackpack.

Pytanie czy przekazywać taką ilość propsów do komponentu czy lepiej w tym przypadku użyć Providera i kontekstu w React? Co powinno być wyznacznikiem tego czy powinienem użyć tutaj kontekstu?

Czy torby i plecaki to tylko przykład, czy należy rozumieć dosłownie - jako faktyczne torby i plecaki (np. w jakimś sklepie internetowym)?
Jeśli to drugie, to dlaczego nie zrobić komponentu <Product>? Czy torby potrzebują faktycznie osobnego komponentu i czy plecaki potrzebują osobnego komponentu?

To jedno, drugie to samą logikę paginacji też mógłbyś w osobnym komponencie zrobić w stylu <Pagination> (albo <ProductList>, whatever) który nie wiedziałby nic o torbach i plecakach. Ogólnie wydaje mi się, że za mocno chcesz każdy przypadek osobno obsłużyć, zamiast zrobić jakiś bardziej ogólny komponent, który pozwalałby na wyświetlenie tablicy:

function ProductList({ products, productsPerPage }) {
     const [currentPage, setCurrentPage] = useState(0);
     const pageCount = Math.ceil(products.length / productsPerPage); 
     // ...
     // tutaj by sam wyświetlał paginowaną listę 
}
// ...
<ProductList products={products} productsPerPage={10} />

const pageCount = Math.ceil(products.length / productsPerPage); - czyli zamiast przekazywać pagesBackpack, moglibyśmy to obliczać na podstawie długości tablicy i tego, ile produktów byśmy mieli na stronę.

Pytanie czy przekazywać taką ilość propsów do komponentu czy lepiej w tym przypadku użyć Providera i kontekstu w React? Co powinno być wyznacznikiem tego czy powinienem użyć tutaj kontekstu?

Wydaje mi się, że to pytanie jest zbyt wczesne i wynika z błędnych założeń.

przekazywać taką ilość propsów do komponentu - nie musisz przekazywać takiej liczby propsów. Patrz moja propozycja wyżej. Ale nawet jakbyś potrzebował faktycznie przekazać dużo danych naraz, mógłbyś to zrobić hurtem jako jeden obiekt z właściwościami (bo ani propsy ani stan w React nie są ograniczone do prymitywów, możesz coś takiego zrobić:

const [foo, setFoo] = useState({abc: 123, def: 456});

Ogólnie ja bym zostawił na razie pytanie, czy użyć providera i kontekstu, a zajął się samą strukturą komponentów i jak wyświetlasz te dane, bo tam czuję jest coś robione "na pałę".