Auto-updating content in Splitter panes after state change

[Charles]

This is a repost from a comment I've added to a thread about this problem on GitHub: https://github.com/syncfusion/ej2-react-ui-components/issues/6

The original post was about the fact that state changes do not trigger a re-render of the content in a splitter pane when they should. It looks like you've made some changes recently to address this, and posted a suggested fix in that thread, but it creates a new problem as per my comment here:

"I was facing the same issue (content of PaneDirective not updating) - and came across this post. I have now implemented the Template as suggested to fix this like so...

        const { email } = this.props; //Mapped from React-Redux state
....
            <SplitterComponent id="horizontal" width='100%' separatorSize='4'>
                <PanesDirective>
                    <PaneDirective size='30%' content={this.MailBox}/> // LHS
                    <PaneDirective size='70%' content={{ template: this.ReadingPane.bind(this), data: email }}/>// RHS
                </PanesDirective>
            </SplitterComponent>

This indeed causes the ReadingPane component to be updated when the value of "email" changes - BUT it also causes the content of the LEFT HAND PaneDirective to re-render - which causes unnecessary flickering and resets its state back to the initial state every time. How can I get it so ONLY the content that depends on the "email" component gets re-rendered? I've tried adding a shouldComponentUpdate method to Mailbox to return false but it doesn't work.

Regards,

Charles"

Note that I have for the time being worked around this problem using the react-splitter-layout component (https://www.npmjs.com/package/react-splitter-layout) - which is nice and simple to use and works exactly as I would expect - however I imagine you would rather we were able to use the Syncfusion version of the control.

As a general point - please note the elegant simplicity of the react-splitter-layout component - this is a much better way of handling React content (as child content) than having to write awkward templates - the whole point of React is to get away from that kind of thing. Is there any way you could re-write your splitter component (and others like it) so we can just render child content within elements in a natural, React-like way ?

[Narayanasamy Panneer Selvam]

Hi Charles,


We regret for the inconvenience.


Due to state changes causes re-rendering of ejs components, so you may experience flickering issue with Splitter. We have already considered ‘updating value to ejs components through state changes’ as improvement from our end. This improvement with function template rendering will be include in the upcoming Volume-2 main release.


Now you can track status of the improvement task from following feedback link: https://www.syncfusion.com/feedback/12649/


Regards,
Narayanasamy P.