| HN Mirror

> doesn't shoehorn OOP into an FP approach to UI

Functional UI is still need some sort of imperative shell [1] to manage state. You can use OOP and Remold just for "reactive" behaviour, and implement all state transitions inside object in a functional way. For example:

    // Pure function
    const addProduct = (order, product) => ({
        total: order.total + product.price,
    });
    
    // Imperative state
    class Order extends Remold {
        state = {
            total: 0
        };        

        @act setState(newState) { this.state = newState; }

        addProduct(p) { this.setState(addProduct(this.state, p)); }
    }

> What are the advantages of this solution over features already in React (no need of Redux) such as context and the reduce hook?

From the React Documentation about Context feature [2]:

> Apply it sparingly because it makes component reuse more difficult.

With Remold you don't have any problems with component's reusability. You just attach pure component to an object and "connect" object's state into component's props:

    // Pure component
    const OrderWidget = ({ total }) => <div class="widget">{total}</div>;
    
    // Pure function
    const addProduct = (order, product) => ({
        total: order.total + product.price,
    });
    
    // Imperative state
    class Order extends Remold {
        state = {
            total: 0
        };        

        @act setState(newState) { this.state = newState; }

        addProduct(p) { this.setState(addProduct(this.state, p)); }
        
        @mold(OrderWidget) asWidget() { return { total: this.state.total }; }
    }

[1] https://www.destroyallsoftware.com/talks/boundaries

[2] https://reactjs.org/docs/context.html?no-cache=1#before-you-...