My top-level React component provides a context to all its children which is used to render UI. The context is an array, and a UI element is generated for each element in the array. Users can delete items from this array using buttons placed around the app and throughout the component tree.

The problem is when an element is deleted, the context takes a really long time to update and the app feels unresponsive. I know it's because it's async, but it's causing UX issues.

How can I make my app more responsive? Is there a way to force a state update?

I'm not sure how to approach fixing this. Would a state management lib work?

CodePudding user response：

Turns out this is an issue with Chrome being a memory hog. I cleared caches and cookies, restarted chrome server, and everything started working. What a silly thing to spend hours profiling your react app for! Hopefully this can help someone else.