React bootstrap modal triggering re-render Gantt-Chart

[Kyungjin Lee]

Hello,

We made component contains Gantt Chart and Several bootstrap modal,

Modal is control by react state. 

[Component]

    [modalA, setModalA] = useState();

    [modalB, setModalB] = useState();

    let ganttInstance;

    const dataSource = new DataManager( ... adaptor:new WebApiAdaptor(), ... ); 

   

    return (

        <>

            <Gantt ... [doSomething]={()=>setModalA(true)} >

            <Modal A>

            <Modal B>

       </>

    )

Upper code snippet,

When I show and hide Modal A, Modal B , Gantt Chart request all data to remote server and re-render whole chart.

Problem is 

First, Too many useless requests.

Second, Too man unnecessary re-render, it make blink the chart.

How can I control the requests and re-render problem?

 

[Sridharan Jayabalan]

Hi Kyungjin,

 

Greetings from Syncfusion.

Based on your query, performing state change using "useState()", the component will re-render. So the Gantt inside the react component also re renders. This is React behaviour and not the Syncfusion Gantt issue 

Refer below given link for your reference:

1. https://stackoverflow.com/questions/73008373/setting-a-usestate-to-true-when-the-current-value-is-already-true-causes-re-rend
   

2. https://stackoverflow.com/questions/72960284/what-exactly-is-re-rendering-and-what-is-the-flow-of-usestate-hook

 

 We suggest you use alternate solution other than useState

Regards,

Sridharan