NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Maximum update depth exceeded

Browse Source
This commit is contained in:
zaidmukaddam 2024-08-08 22:59:16 +05:30
parent d4e7269fe4
commit ba4111c9ef
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/page.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
"use client"; "use client";
import React, { useRef, useCallback, useState, useEffect, ReactNode } from 'react'; import React, { useRef, useCallback, useState, useEffect, ReactNode, useMemo } from 'react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import { useChat } from 'ai/react'; import { useChat } from 'ai/react';
@ -134,17 +134,21 @@ export default function Home() {
); );
}; };
const CitationComponent: React.FC<{ href: string; children: ReactNode; index: number }> = ({ href, children, index }) => { const CitationComponent: React.FC<{ href: string; children: ReactNode; index: number }> = React.memo(({ href, children, index }) => {
const citationText = Array.isArray(children) ? children[0] : children; const citationText = Array.isArray(children) ? children[0] : children;
return renderCitation(citationText as string, href, index); return renderCitation(citationText as string, href, index);
}; });
const MarkdownRenderer: React.FC<{ content: string }> = ({ content }) => { CitationComponent.displayName = "CitationComponent";
const citationLinks = [...content.matchAll(/\[([^\]]+)\]\(([^)]+)\)/g)].map(([_, text, link]) => ({
text, const MarkdownRenderer: React.FC<{ content: string }> = React.memo(({ content }) => {
link, const citationLinks = useMemo(() => {
})); return [...content.matchAll(/\[([^\]]+)\]\(([^)]+)\)/g)].map(([_, text, link]) => ({
text,
link,
}));
}, [content]); // Recompute only if content changes
return ( return (
<ReactMarkdown <ReactMarkdown
@ -152,9 +156,9 @@ export default function Home() {
className="prose text-sm sm:text-base" className="prose text-sm sm:text-base"
components={{ components={{
a: ({ href, children }) => { a: ({ href, children }) => {
const index = citationLinks.findIndex(link => link.link === href); const index = citationLinks.findIndex((link: { link: string | undefined; }) => link.link === href);
return index !== -1 ? ( return index !== -1 ? (
<CitationComponent href={href as string} index={index} > <CitationComponent href={href as string} index={index}>
{children} {children}
</CitationComponent> </CitationComponent>
) : ( ) : (
@ -168,7 +172,9 @@ export default function Home() {
{content} {content}
</ReactMarkdown> </ReactMarkdown>
); );
}; });
MarkdownRenderer.displayName = "MarkdownRenderer";
useEffect(() => { useEffect(() => {
if (bottomRef.current) { if (bottomRef.current) {