Escaping Classroom Modal Hell: Designing a React useFunnel Hook

In the classroom, UI and functions like start message, completion message, review modal, and next class guide are chained and executed at specific points in time. Previously, each modal's handleClose directly called the next modal, creating strong coupling, and conditional branches like isKo, isReviewable, and isFromComplete were scattered throughout components, making policy changes difficult.

For example, after reaching 100% progress, a recommendation modal needed to be added after the review modal. This required adding global state and inserting branching logic into both the review modal and the recommendation modal. Since the flow had to be reinterpreted elsewhere, changing modal order or inserting a new modal in the middle kept becoming more expensive.

As a solution, the Funnel pattern was introduced, designing a useFunnel hook that treats each screen or task as a Step and executes them in order. A funnel starts with startFunnel(type), and each step is defined with condition, action.fire, action.cleanup, and type: 'modal' | 'function'.

The key point is that modal components no longer need to know the next flow.

• Modals only call nextStep() when closed.
• Condition judgment is consolidated in one place, the funnel definition.
• Order can be changed simply by rearranging the array.
• type: 'function' steps automatically advance to the next step right after execution.

For implementation, it was provided globally via Context so multiple components could share the same funnel state. A prepareCondition was also added to wait for conditions, handling asynchronous preparation such as waiting for API responses, and a structure for nested execution of other funnels was supported, enabling flows like a1-a2-b1-a3-b2.

As a result, coupling between modals was reduced, condition logic was centralized, and execution order became declaratively readable. Unlike a typical funnel where the user drops off, the purpose here is guaranteeing sequential execution, so a more accurate name might be useStepper, but useFunnel was adopted to match community convention.