Understanding React Re-Renders: Preventing Glitches in Data Sorting with useRef

[ojaylu]

Describe the issue
After rerendering in React, the sorted data becomes glitchy.

Note: But using useRef on the columns was able to solve the issue. Not sure why though.
https://codesandbox.io/p/sandbox/react-revogrid-resize-forked-3wrvd4

To Reproduce
Sort the column so that rows are sorted in a different order, then click 'Cause Rerender'.
https://codesandbox.io/p/sandbox/react-revogrid-resize-forked-5dhzc3
Thanks

Screen.Recording.2024-08-31.at.1.04.22.AM.mov

[revolist]

Hello, will check!
Thank you for posting!

[revolist]

Hi @ojaylu,

Thank you for bringing this issue to my attention. I’ve taken a close look at the problem, and I’d like to explain what’s happening and why using useRef helped resolve the issue.

Understanding the Issue:

In React, when you define a component, like in your example with the App() function, any change to the state (e.g., using useState) triggers a re-render of the entire component. In your case, you have:

const source = []; 
const columns = []; 
const [counter, setCounter] = useState(0);

<RevoGrid columns={columns} source={source} />

When you call setCounter, it triggers a re-render, which results in the entire App component being re-executed. This re-initializes both the source and columns arrays, effectively creating new instances of these objects. As a result, when RevoGrid receives these new instances, it assumes that the data has changed entirely, leading to the observed glitchy behavior or flickering when the grid is re-rendered.

Why useRef Solves the Issue:

useRef creates a persistent reference that survives across renders without causing re-renders. By storing source and columns in a useRef, you prevent React from re-initializing these arrays on every render. This means the grid sees the same source and columns references after each render, so it doesn’t mistakenly assume the data has changed entirely.

Here’s how you could use useRef to resolve this issue:

const sourceRef = useRef([]); 
const columnsRef = useRef([]);

<RevoGrid columns={columnsRef.current} source={sourceRef.current} />

By doing this, when setCounter is called, the source and columns references remain the same, and RevoGrid doesn’t perform an unnecessary re-initialization, thus avoiding the glitchy behavior.

Best Practices:

To avoid such issues, it’s important to update only the data you want to change, rather than re-initializing all data on every render. For example, if only the source or columns need to change, you should specifically update those without affecting the rest of the component's data.

In summary:

• Use useRef for data that should persist across renders without triggering a re-render.
• Ensure that only necessary data is updated to avoid re-initializing everything and causing unintended side effects.

I hope this helps clarify the issue. If you have any further questions or need more assistance, feel free to reach out!