Menu

1 / 2

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

DEV Community·Oleksii Kyrychenko·6 months ago
#eF2GdngI
#react#typescript#assembly#frontend#disabled
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…

Continue reading — create a free account

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