React rendering performance issue

Hey everyone,

I'm wrestling with a particularly stubborn React component that's causing significant re-renders, severely impacting our application's overall performance optimization. It’s a complex data table component that receives its data and configuration dynamically, and despite my best efforts, it frequently re-renders even when its underlying props and context values appear stable.

The component, let’s call it DynamicDataTable, consumes a large array of objects (rows) and a configuration object (tableConfig) as props. Both of these can contain nested objects and arrays. Additionally, it uses a custom React Context for global theme settings and user preferences. Internally, it manages pagination state and column sorting. The observed problem is that even when the parent component passes seemingly identical rows and tableConfig (deeply, not just referentially), and the context values haven't changed, DynamicDataTable still triggers a full re-render, leading to noticeable UI jank, especially with larger datasets. This is particularly frustrating because React DevTools Profiler shows the re-render occurring without clear prop changes.

Here's a simplified snippet of how the component might look:

const DynamicDataTable = React.memo(({ rows, tableConfig }) => {
  // ... uses useContext for theme/prefs ...
  // ... internal state for pagination/sorting ...

  console.log('DynamicDataTable re-rendered!'); // This fires too often

  return (
    <div>
      {/* Render table based on rows and tableConfig */}
    </div>
  );
}, (prevProps, nextProps) => {
  // Custom comparison logic attempted
  // return isEqual(prevProps.rows, nextProps.rows) && isEqual(prevProps.tableConfig, nextProps.tableConfig);
  // ^ Even with deep equality check, issue persists or performance degrades due to isEqual itself
  return false; // Forcing re-render for debugging
});

I've already gone through the standard playbook for performance optimization: wrapping the component with React.memo, extensively using useCallback for event handlers, and useMemo for derived values and memoizing complex prop objects passed from parent components. I've also ensured that state updates are immutable. The custom comparison function for React.memo, even with a deep equality check (using something like Lodash's isEqual), either doesn't fully prevent the re-renders or introduces its own overhead that negates the benefits. I suspect there might be subtle reference changes higher up the tree or within the context provider that I'm missing, or perhaps an issue with how the context is consumed.

Has anyone encountered similar issues with complex components and found less obvious patterns or advanced debugging strategies to truly pinpoint and prevent these unnecessary re-renders, especially when dealing with deeply nested data structures and context consumption? Any insights into optimizing reference equality checks for complex objects without sacrificing performance would be incredibly helpful.

Help a brother out please...