Discussion on: Preact Composition API

View post

I like it! Better than hooks. 👍

I only wish you'd do the obvious, idiomatic thing - instead of hiding the current component in a global variable, make it plain what's actually going on:

const Comp = createComponent((component) => {
    const filterRef = component.ref('ALL');
    const filteredItems = component.watch(
        [props => props.items, filterRef],
        ([items, filter]) => filterItems(items, filter)
    );
    return () => <ItemList items={filteredItems.value} />;
});

Yes, slightly more repetitive - but takes all the initial mystery out of it, and avoids teaching newbs how to be "clever".

I don't know why anybody thinks it's more "elegant" to hide things in global state.

In my world, obvious beats clever, every time. Code should do what it looks like it does. That's my only real gripe with hooks. 🤷‍♂️

Porfirio • Oct 3 '19

I like that concept also, it can solve some issues, but may introduce others.

Using named exports alow for better tree-shaking and better minification, making all composition functions optional.
The way you specify it needs to create a object with all the functions binded.

Thanks for bringing this to discussion. We can find the pros and cons of both approachs and decide where to go!

Rasmus Schultz • Oct 3 '19

Using named exports alow for better tree-shaking and better minification, making all composition functions optional.

True.

But it doesn't have to be OOP - that was just an example.

We can do the same thing with functions:

const Comp = createComponent(component => {
    const filterRef = ref(component, 'ALL');
    const filteredItems = watch(
        component,
        [props => props.items, filterRef],
        ([items, filter]) => filterItems(items, filter)
    );
    return () => <ItemList items={filteredItems.value} />;
});

My only point is don't hide your dependencies in global state.

Porfirio • Oct 6 '19

I see your ideas.
Would be nice to discuss this better. Could you post your concern on the PR github.com/preactjs/preact/pull/1923
or on Preact Slack
preact.slack.com/

Rasmus Schultz • Oct 7 '19

Done 🙂