feat/changelog-display-navigation

[ComputelessComputer]

Description

• Enhanced version changelog display
• Added changelog navigation button in devtools

[netlify]

✅ Deploy Preview for hyprnote-storybook canceled.

Name	Link
🔨 Latest commit	831d0d5
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/695b6134954fbc00087fc1f3

[netlify]

✅ Deploy Preview for hyprnote canceled.

Name	Link
🔨 Latest commit	831d0d5
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/695b61345d489b00082d53ee

[netlify]

✅ Deploy Preview for howto-fix-macos-audio-selection canceled.

Name	Link
🔨 Latest commit	831d0d5
🔍 Latest deploy log	https://app.netlify.com/projects/howto-fix-macos-audio-selection/deploys/695b61341190d60008e2337c

[graphite-app]

Memory leak and race condition: The async operation in useEffect has no cleanup logic. If the component unmounts before the promise resolves, setContent and setLoading will be called on an unmounted component, causing React warnings and potential memory leaks. Additionally, if version changes rapidly, multiple promises can be in-flight and the last one to resolve wins, not necessarily matching the current version.

useEffect(() => {
  let cancelled = false;
  
  const key = Object.keys(changelogFiles).find((k) =>
    k.endsWith(`/${version}.mdx`),
  );

  if (!key) {
    setLoading(false);
    return;
  }

  changelogFiles[key]().then((raw) => {
    if (cancelled) return;
    const markdown = stripImageLine(stripFrontmatter(raw as string));
    setContent(md2json(markdown));
    setLoading(false);
  });
  
  return () => {
    cancelled = true;
  };
}, [version]);

Suggested change

	useEffect(() => {
	const key = Object.keys(changelogFiles).find((k) =>
	k.endsWith(`/${version}.mdx`),
	);
	if (!key) {
	setLoading(false);
	return;
	}
	changelogFiles[key]().then((raw) => {
	const markdown = stripImageLine(stripFrontmatter(raw as string));
	setContent(md2json(markdown));
	setLoading(false);
	});
	}, [version]);
	useEffect(() => {
	let cancelled = false;
	const key = Object.keys(changelogFiles).find((k) =>
	k.endsWith(`/${version}.mdx`),
	);
	if (!key) {
	setLoading(false);
	return;
	}
	changelogFiles[key]().then((raw) => {
	if (cancelled) return;
	const markdown = stripImageLine(stripFrontmatter(raw as string));
	setContent(md2json(markdown));
	setLoading(false);
	});
	return () => {
	cancelled = true;
	};
	}, [version]);

Spotted by Graphite Agent



Is this helpful? React 👍 or 👎 to let us know.