This is a useful tool from react.dev
When planning the structure of state, make a diagram of each possible state a circle and each event that leads to a change of state an arrow.
This can be further distilled by combining some of these states into the same circles in order to remove paradoxes. For example, empty and typing
, empty
, and submitting
can’t all be true at the same time. Only one of those can ever be true. These can be combined into a single called status
which would be an enum. You probably don’t need empty
at all, since that can be derived from some other state like input
(not shown in the diagram).