Changed the state within ReactDom in the event handler, the grid will be rerendered In React.

[JihoonLee1996]

Describe the bug I am developing in React with tui-grid version 4.21.9.

I am using the "focusChange" event to insert specific hidden data of the row into the Editor when the focus changes.

To get the rowKey and save the editor's contents, we need to maintain focus on the row.

However, when I change the state in the event handler, the grid re-rendered and lost focus.

I think it is a bug, but if not I'd like to know how to handle state in grid events without re-rendering.

To Reproduce

1. Add an event listener for focusChange with the code below.

   const [state, setState] = useState('test');
   gridRef.current.instance.on('focusChange', (event)=>{
   setState('focusChanged' + Math.random() * 1000000);
   })

2. Add the textarea below anywhere in the component with the grid.

   <textarea value={state} />

3. Click on any row in the grid.

4. Check if it loses focus.

Expected behavior If the State is changed, the grid shouldn't re-render and lose focus.

Screenshots

Desktop (please complete the following information):

• OS: Mac M1
• Browser chrome

[JihoonLee1996]

I resolved this issue by using useRef() instead of useState() hook when updating the ReactDOM.

But I still want to know, how to use useState in the TUI Grid's event handler without re-rendering.