Hi all,
I'm running into an issue while working with the OJET Table component. Specifically, when I store the table data in a state variable in the parent component—so that the same data can be shared with other components—the entire table component re-renders whenever that state is updated. This results in a noticeable "blink" or flicker, even when adding just a single row.
In the VDOM Training example, the table data is maintained at the global scope, which avoids this problem. However, in my use case, the data needs to live inside component state to allow for multiple instances of the Table component to display different data sets dynamically.
To demonstrate the issue, I’ve adapted the VDOM Training (linked below this list) example by:
- Moving the data to the parent App component's state
- Rendering the Table as a child component
- Adding a button to prepend a new row to the data array
https://github.com/ArashRasteh/poc-oj-table-data-state-update
This setup works functionally but causes the table to flicker with every data update, presumably because the entire component is re-created on each render. You can test this by clicking the add button at the very top, multiple times. Although the data only updates after the first click (I'm guessing due to having the same ID), but the flickering is still noticeable.
Has anyone encountered this behavior before? I'd really appreciate any guidance on:
- How to store the data in a parent component’s state
- Preventing the entire OJET Table from re-rendering on each data change
- Allowing smooth data updates without perceptible UI flicker
Thanks in advance for any suggestions!
Thanks!