Tastify – Tastic Rendering Optimizations

Constantly changing data-prop

First, the data prop that tastics receive was recreated too often in the past.

It is now being memoized in the TasticWrapper-Component. Because of this, for a PureComponent no unnecessary rerender would be caused for data prop.

In addition to data, tastics also receive a rawData prop, that is still changing very often. rawData is only required in edge cases. Some legacy tastics might still use it. If your tastic currently uses rawData, please check if you can migrate it to use data instead. If that is not possible, please let us know what you are missing to work without rawData.

Remove Unnecessary Props from Tastics

Tastify removes rawData, node, and page props from the tastic per default. You can of course opt in to receive them. This makes sure that your tastic only re-renders when the data prop changes.

Adapting a Tastic

Instead of connecting a tastic with the redux-store using the connect helper you can use the tastify Higher Order Component and opt in to additional properties you want to receive:

export default tastify({
    connect: {
        context: true,
        node: true,
        cart: true,
        wishlist: true,
    }
})(NavigationTastic)

You will always receive the tastic configuration data, which includes the stream data, of course.

Currently the following types are supported: * connect.rawData: Whether to pass "rawData". Should not be needed anymore. * connect.node: Whether to pass information about the current node. * connect.page: Whether to pass information about the current page. * connect.tastic: Whether to pass the schema of the current tastic. Rarely needed. * connect.context: Whether to pass the frontastic context object. * connect.deviceType: Whether to pass the deviceType * connect.isServerSideRendering: Whether we should pass a flag isServerSideRendering

ℹ️ See documentation in tastifyComponent in order to see the latest available configuration.

Checking if tastic is currently rendered inside Server-Side Rendering

With tastify we also added the ability to check inside a tastic whether we are running inside a server-side-rendering process.

In order to get that information you need to enable the connect configuration for isServerSideRendering:

export default tastify({
    connect: {
        isServerSideRendering: true,
    }
})(YourTastic)

Then you could check for the isServerSideRendering prop inside your Tastic to know whether this call come from the browser or our SSR process.

Summary

The re-renders for components like this go down significantly. The less data you depend on the less re-renders will happen in your components.