Solvedreact easy state Performance question

Hi,

So I’ve been using your library with preact and am quite amazed how well it works.
I’ve been checking the performance from http://www.stefankrause.net/js-frameworks-benchmark7/table.html also and noticed that the partial updates are standing out a bit.

Do you have any explanation why that is? It’s not a show stopper, just curious :)

Thanks!

10 Answers

✔️Accepted Answer

Updated it for functional components:

import { Component } from 'preact'
import { observe, unobserve } from '@nx-js/observer-util'
export { observable } from '@nx-js/observer-util'

export function view(Comp) {
    const isStatelessComp = !(Comp.prototype && Comp.prototype.render)
    const BaseComp = isStatelessComp ? Component : Comp

    class ReactiveHOC extends BaseComp {
        constructor(props, context) {
            super(props, context)
            this.render = observe(this.render, {
                scheduler: () => this.setState({}),
                lazy: true
            })
        }
        render() {
            return isStatelessComp
                ? Comp(this.props, this.context)
                : super.render()
        }

        shouldComponentUpdate(nextProps, nextState, nextContext) {
            const { props, state } = this

            // respect the case when user prohibits updates
            if (
                super.shouldComponentUpdate &&
                !super.shouldComponentUpdate(nextProps, nextState, nextContext)
            ) {
                return false
            }

            // return true if it is a reactive render or state changes
            if (state !== nextState) {
                return true
            }

            // the component should update if any of its props shallowly changed value
            const keys = Object.keys(props)
            const nextKeys = Object.keys(nextProps)
            return (
                nextKeys.length !== keys.length ||
                nextKeys.some((key) => props[key] !== nextProps[key])
            )
        }

        componentWillUnmount() {
            if (super.componentWillUnmount) {
                super.componentWillUnmount()
            }
            unobserve(this.render)
        }
    }

    ReactiveHOC['displayName'] = Comp['displayName']

    return ReactiveHOC
}

More Issues: