[Observability overview] Fix overview page duplicate requests

[shahzad31]

Summary

Fixes #125200

Wrap bucketsize value in useMemo, since it was triggering unnecessary re-renders.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 1aad83c
• Storybooks Preview
• Webpack Bundle Analyzer

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
observability	393.0KB	393.2KB	+180.0B

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @shahzad31

[estermv]

I'm not sure that useMemo is the best option here. bucketSize and bucketSizeValue are exactly the same value and I don't think it reflects the intentions of what we want to achieve, which could lead to confusion and bugs in the future.
bucketSize should probably be part of the state of the component and we should only update it when absoluteTime.start or absoluteTime.end change, preventing unnecessary rerenders.

What do you think about something like this:

Suggested change

	const bucketSize = calculateBucketSize({
	start: absoluteTime.start,
	end: absoluteTime.end,
	});
	const bucketSizeValue = useMemo(() => {
	if (bucketSize?.bucketSize) {
	return {
	bucketSize: bucketSize.bucketSize,
	intervalString: bucketSize.intervalString,
	};
	}
	}, [bucketSize?.bucketSize, bucketSize?.intervalString]);
	const [bucketSize, setBucketSize] = useState(undefined);
	useEffect(() => {
	const bucket = calculateBucketSize({
	start: absoluteTime.start,
	end: absoluteTime.end,
	});
	setBucketSize(bucket);
	}, [absoluteTime.start, absoluteTime.end])

[shahzad31]

i think absolute time start and end changes whenever component re-renders , so can't use those in side effect

[estermv]

I see... I wasn't expecting it 🙃

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125204 or prevent reminders by adding the backport:skip label.

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 125204 or prevent reminders by adding the backport:skip label.