Przerenderowanie rodzica i dziecka komponentu

Witam,

zakładając, że w kodzie mam taką hierarchię komponentów:

<Parent>
    <AddProduct />
    <ProductList />
</Parent>

w AddProduct można dodawać produkty, a w ProductList wyświetlane są wszystkie produkty. Problem jaki obecnie mam to taki, że po dodaniu nowego produktu nie wyświetla się on w komponencie ProductList. Aby się pojawił trzeba przeładować stronę. Chciałbym aby jednak najnowszy produkt był widoczny w ProductList bez przeładowywania strony.

Chciałem to załatwić w taki sposób, że z poziomu Parenta przekazuje callbacka do komponentu AddProduct. Callback byłby wywoływany po dodaniu produktu. W tym callbacku była by zmieniana wartość jakiegoś statu dla komponentu Parent. I miałem nadzieje, że w ten sposób przerenderuje komponent Parent i tym samym ProductList aby wyświetlał się nowo dodany produkt w komponencie ProductList bez przeładowania strony.

Jednak w ten sposób odpala się useEffect w komponencie <Parent> i <ProductList>, ale najpierw odpala się useEffect z komponentu <ProductList>, a później useEffect z komponentu <Parent> i nadal nie wyświetla się nowo dodany produkt w ProductList bez przeładowania strony. Zakładam, że przez to, że najpierw useEffect odpala się w komponencie ProductList zamiast w komponencie Parent nie wyświetla mi się najnowszy dodany produkt bez przeładowania strony.

Czy ma ktoś jakiś sposób jak mogę to obejść? Z góry dzięki

W komponencie w którym renderujesz te AddProduct i ProductList możesz trzymać products jako useState. Coś takiego:

const [setProducts, products] = useState([]);

return (<>
<AddProduct onSubmit=((product) => { setProducts([product, ...products]) })/>
<ProductList products={products}/>
</>)

Możesz też poczytać o https://reactjs.org/docs/context.html.