Diffing algo. forces re-render with respect to no dependency on state

Hello,

I created a state variable representing the latest time which is updated every second, and pass it only to components which rely on time.

const main = logger()(app)(state, actions, view, document.body);
setInterval(main.time, 1000);

export default {
    time: () => state => ({time: new Date()}),
    ...order
}

In my main view, I currently reference state.time in only one component. For some reason though, the entire view gets patched from state.time being updated.

export default (state, actions) =>
    <Layout>
        {/* Header */}
        <GridItem x={1} y={1} xs={-1} ys={1}><NavBar time={state.time}/></GridItem>

        {/* Left Column */}
        <GridItem x={1} xs={5} y={2} ys={8}>
            <Panel>
                <Header>Order</Header>
                <OrderForm order={state.order} actions={actions.order}/>
            </Panel>
        </GridItem>
        ...

I found out the whole view was being re-rendered as the functional component <GridItem/> keeps on continuously being called. This also forces picostyle which is what I am using to style the components to regenerate classes for all components being re-rendered every second.

export const GridItem = (props, children) => {
    console.log(props)
    return styled("div")({
        gridColumn: `${props.x || ''}${props.x && props.xs && ' / ' || ''}${props.xs && ((props.xs !== -1 && `span ` || '') + props.xs) || ''}`,
        gridRow: `${props.y || ''}${props.y && props.ys && ' / ' || ''}${props.ys && ((props.ys !== -1 && `span ` || '') + props.ys) || ''}`,
    })
    (props, children);
}

Does anyone have any ideas on how to not have state.time trigger an entire re-render?

[jorgebucaran]

@iwasaki-kenta Does anyone have any ideas on how to not have state.time trigger an entire re-render?

Render means to call the view function to produce a new virtual node tree and then patch the DOM with it. We are —not— creating new elements, only updating their attributes (setAttribute(element, attribute, value)), hence the flashing. To avoid calling the view function when your view is mostly static, I’d suggest to follow @andyrj’s advice and memoize it for now.

I am, however, interested in exploring “auto-memoization” of views, but perhaps in a separate issue? 🙏

[andyrj]

Also since picostyle is going to do this for every user, adding memoization to that libraries styled() might be neat to consider also.