I am building a React app which uses Apollo to request data from the backend. The root component requests the data via Apollo and contains two child components:
- Canvas that renders the data via Pixi.js
- FilterContainer that includes multiple filters (the filters are created from the initial data --> don't need to be re-rendered after every request)
I am using React's Hook useContext to pass the filtered values from the filters to the root component. The root component builds the whole query and starts the request. Since the root component re-renders after the request, it causes the whole app to re-render. Therefore I'm managing the whole state from the filters (e.g. checked checkboxes, search-values, ...) in my ReactContext because otherwise it would be lost after re-rendering.
My question is, if there is another way to structure my app, since this approach seems very inefficient to me.
Thanks in advance!