Tooltip rendering crashes when resizing the chart "Cannot read properties of undefined (reading 'payload')"

[tran-simon]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Hover the chart to show the tooltip
2. Press the button
3. Resize the window (to show/hide the scrollbar)
4. Repeat 3 times

The app crashes sometimes with "Cannot read properties of undefined (reading 'payload')" when the window is resized.

The crash is not consistent, so you should reload and try multiple times to reproduce

What is expected?

The tooltip should appear correctly

What is actually happening?

The whole app crashes (null pointer exception)

Environment	Info
Recharts	v2.10.1
React	18.2.0
System	codesandbox
Browser	Chrome

---

This is due to a mistake in getItemByXY in generateCategoricalChart.tsx.

recharts/src/chart/generateCategoricalChart.tsx

Lines 2250 to 2252 in 0d5326a

	isFunnel(graphicalItem, activeItem) ||
	isPie(graphicalItem, activeItem) ||
	isScatter(graphicalItem, activeItem)

recharts/src/util/ActiveShapeUtils.tsx

Lines 142 to 152 in 7fb227d

	export function isFunnel(graphicalItem: GraphicalItem, _item: unknown): _item is FunnelItem {
	return 'trapezoids' in graphicalItem.props;
	}
	export function isPie(graphicalItem: GraphicalItem, _item: unknown): _item is PieItem {
	return 'sectors' in graphicalItem.props;
	}
	export function isScatter(graphicalItem: GraphicalItem, _item: unknown): _item is ScatterItem {
	return 'points' in graphicalItem.props;
	}

isFunnel, isPie and isScatter do not check if activeItem is defined, so it might cast it as a defined FunnelItem/PieItem/ScatterItem even if activeItem is undefined

[ckifer]

Thanks for the fix. I can't reproduce at all, I wonder why its so random

Edit: have retried the reproduction steps on different browsers multiple times and still can't reproduce

[tran-simon]

@ckifer yeah it's really hard to reproduce, I'll keep looking for a way to reproduce it consistently

But I still think that part of the code is smelly, activeItem is typed as optional but the isFunnel/is... functions cast it as defined without checking if it actually is

[ckifer]

makes sense

[agahakan]

A similar issue can be consistently reproduced in this sandbox.

Hover your mouse over the chart and wait 3 seconds; an error will be thrown: 'Cannot read properties of undefined (reading 'payload')'.

error is caused by the useIncrement hook, despite count not being used, its presence triggers the error.
to avoid this error you can just move the data array outside of the App component. or you can comment count.

these are not ideal solutions since data might need to be dependent on a hook

[ckifer]

fixed merged and released in 2.10.2 - please comment back if this persists