React 19's useFormStatus Fixed My Prop Drilling. Then It Sat There Returning False
Part 1 was about waiting well. Part 2 was about not waiting at all. This one is about a value I needed in a component that never created it, and about the ten minutes I lost putting the hook in the one place it can't work. If you've read Part 1 on useActionState and Part 2 on useOptimistic , both of those hooks answer a question from inside the component that called them. That was never a problem…
React 19's useFormStatus hook solved the issue of prop drilling in the original form. However, it initially returned a false value, even when it should have been true. The reporter tried implementing the hook within the OrderForm component, but it didn't work as expected. They assumed that placeOrder was not asynchronous or that there was a problem in the action itself.
After some time, they realized that useFormStatus doesn't read the state owned by OrderForm. It reads the status of the parent form, and at the time the hook was called, OrderForm was still deciding what to render. The parent form didn't exist yet, so there was no ancestor for the hook to find. Thus, it fell back to its default, unpending state.
To fix the issue, the hook needed to be moved out of OrderForm and placed further down the tree, where it could properly detect the pending state of the form.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
