Menu

Post image 1
Post image 2
1 / 2
0

When disabled is not enough: Building guarded UI state in React

DEV Community·Oleksii Kyrychenko·25 days ago
#eF2GdngI
Reading 0:00
15s threshold

A continuation of the isLoading discussion: why blocking a workflow and representing that state in the UI are two different problems. In the previous article , I wrote about why local isLoading starts to break down in complex React applications. The main idea was not that isLoading is bad. It is not. The problem is that isLoading is often too local for a workflow that is no longer local. A boolean can tell one component that something is pending. It cannot tell different controls how they should behave while the same workflow is pending. A single async action may affect: the submit button that started it form fields that should not be edited during the request navigation links that should be temporarily blocked toolbar actions that should not run at the same time a panel or section that should expose why it is unavailable At some point, the real question is no longer: const [ isLoading , setIsLoading ] = useState ( false ); Enter fullscreen mode Exit fullscreen mode The real question becomes: Which…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More