I have a parent component A inside this parent component I have 2 child components B and C Component B renders a table and component C is a search option where the user can input keywords for search and on the basis of that a list of matching items will be displayed when the user selects any of the items from the list it will get added in the Database and from component A I will be dispatching the custom event to refresh the component to show updated table to the user.
But by doing so my context state which has a list of all the keywords is losing all the state's data. Component A is wrapped in context to store the keywords data.
in my parent component this is how I am dispatching event and
let event = new CustomEvent('ComponentBRefresh', { bubbles: true });
document.dispatchEvent(event);
in my child component, this is how I handle the refresh of table data.
document.addEventListener('ComponentBRefresh', this.silentRefresh);
How can prevent context from losing the state and refresh the component as well. I can not use redux due to some restrictions.