---
robots: noindex, nofollow
tags: pitch
---
For instructions on shaping a project see here: [Shaping a Project](/kX02SXVbS6KzMOQd56i6Cg)

# Component Native Eventing Convergence
:snail:

### Problem
*From: [Problem guidance](https://basecamp.com/shapeup/1.5-chapter-06#ingredient-1-problem)*

Fabric Slider, ColorRectangle, and ColorSlider are some of the last simple components that relies on `EventGroup` which has been targeted for removal. `EventGroup` adds unnecessary cycles to event handling.

### Appetite
*From: [Appetite guidance](https://basecamp.com/shapeup/1.5-chapter-06#ingredient-2-appetite)*

1 weeks. The chosen components only have a few places where event group is used

### Solution
Event group should be replaced wit the native javascript `on` in Slider, ColorRectangle, and ColorSlider. For reference, there are several components that already use an array functions (`disposables`) and `on` to achieve the desired behavior.

class ... {
    private _disposables: (() => void)[] = [];
    
    componentDidMount() {
        this._disposables.push(on(
            window,
            'scroll',
            this.scrollCallback,
            true)
        );
    }
    
    componentWillUnmount(){
        this._disposables.foreach((dispose: () => void) => dispose());
    }
}

### Risks (Rabbit holes)
*From: [Rabbit hole guidance](https://basecamp.com/shapeup/1.5-chapter-06#ingredient-4-rabbit-holes)*
This has been tried before as detailed in [this document](https://hackmd.io/@cmH-jXYESEOtfKAsIDzYZA/rJxwQkeP8). There were other circumstances and different libraries used that made it seem like we could try again.

### Out of scope (No-gos)
*From: [No-gos guidance](https://basecamp.com/shapeup/1.5-chapter-06#ingredient-5-no-gos)*

This does not need to remove EventGroup everywhere yet