HandleSet is the best choice for onClick, onChange, onInput since React introduced function components. Named, local, in-scope event handlers for JSX.

Typical Event Handlers

customers.map(c => (
    <>
        <label>
            <span>First Name</label>
            <input onChange={e => setFirstName({id: c.id}, e.target.value)} />
        </label>
        <label>
            <span>Last Name</label>
            <input onChange={e => setLastName({id: c.id}, e.target.value)} />
        </label>
    </>
))

HandleSet JSX

customers.map(c => (
    <HandleSet actions={{
        updateFirstName: e => setFirstName({id: c.id}, e.target.value),
        updateLastName: e => setLastName({id: c.id}, e.target.value)
    }}>{
        actions => (
            <label>
                <span>First Name</label>
                <input onChange={actions.updateFirstName} />
            </label>
            <label>
                <span>Last Name</label>
                <input onChange={actions.updateLastName} />
            </label>
        )
    }
    </HandleSet>
))

Explain HandleSet Quicky

The HandleSet component takes one prop: actions, it also takes a children function (render props). The actions prop is an object of event handlers, you pass a function to children that will receive those handlers in actions. If you name an an onFirstPress, then you'll have it in your children function as prop.

In "HandleSet JSX," the value of actions => is exactly the same as the object passed to actions={}.

What Is The Purpose Of HandleSet?

1. To give readable names to event handlers.
2. Keep handlers nearish to where they're needed.
3. Know what handlers some JSX has at a glance.
4. Keep "go to definition" / "find all references" truthful.

.

Readable Names

<HandleSet
    actions={{
        nickChange: (n = "") => setPersonName(person.id, n),
        nickDelete: () => setPersonName(null),
        friendAdd: () => setPersonStatus(person.id, "FRIEND"),
        friendRemove: () => setPersonStatus(person.id, null)
    }}
>

Handlers Near Their Markup

<HandleSet actions={{...}}>
{actions => (
    <div>
        <label>
            Nickname
            <input onChange={e => actions.nickChange(e.target.value)} />
            <button onClick={actions.nickDelete}> Clear </button>
        </label>
        <label>
            { person.isFriend
                ? <button onClick={actions.friendRemove}>Remove Friend</button>
                : <button onClick={actions.friendAdd}>Add Friend</button>
            }
        </label>
    </div>
)}
</HandleSet>

Go To Definition

Since HandleSet is authored having IDEs like VSCode in mind, anytime an action handler is used, you can right click on it to take you to where it you defined it. When reading <button onClick={actions.friendAdd} />, you're able to have the editor Go To Definition which takes you directly to something like friendAdd: () => .... Also, when authoring JSX, anytime actions. is typed, it will show all the handlers defined.

TypeScript Actions Autocomplete

The actions object always stays in sync with the handlers passed to actions={}. If the type of actions changes or action handlers are removed, the actions => parameter will alert TS to places where the removed handler is still being used. If an action has new parameters or different parameter types, this too will alert TS so event handlers are always called how you intended them.

        ┌─────────────┐ 
        │  HandleSet  │ 
        └──────┬──────┘ 
               │        ┌─────────┐   ┌──────────┐
               │        │ actions │   │ children │
               │        └────┬────┘   └─────┬────┘
               │             │              │    
               │             │              │             ┌───────┐
               └────────────►│─────────────►│────────────►|  JSX  |    
                             │              │             └───────┘
                             │              │ 
                         ┌───┴───┐      ┌───┴───┐
                         └───────┘      └───────┘

How To Use HandleSet
ArkSouthern