I have a react application that uses React router. One of the pages loads big data and converts it to markdown content. The problem is this page also contains many other components so if the markdown component loads big data it gives me this error in the browser:
.

我有一个使用React路由器的React应用程序。其中一个页面加载大数据并将其转换为markdown内容。问题是这个页面还包含许多其他组件，所以如果markdown组件加载大数据，它会在浏览器中给我这个错误：。

This is the code of the page:

以下是该页面的代码：

export default function SingleEntry (props){

    const [theEntry, setTheEntry] = React.useState()
    const [theSearchedEntry, setTheSearchedEntry] = React.useState()
    const [searched, setSearched] = React.useState(false)
    
     React.useEffect(function(){
                fetch('/entries/' + props.id)
                // fetch('/entries/' + 4)
                .then(res => res.json())
                .then(data => {
                setTheEntry(`${data.body}`)
                setTheTitle(`${data.title}`)
             

                },[])
   
React.useEffect(function () {

  // if (loaded){
  setHeadings([])
  const elements = Array.from(document.querySelectorAll("h2, h3, h4"))
      .filter((element) => element.id)
      .map((element) => ({
        id: element.id,
        text: element.textContent ?? "",
        level: Number(element.tagName.substring(1))
      }
      ));
  setHeadings(elements);
  

// }

}, [theEntry])


//...other functions 
  

 return (
        
        //....other components
       
        <div id="SEforpdf" className="SE">
  
    <ReactMarkdown
      components={{
        h2: ({ node, ...props }) => (
          <h2 id={`${props.children[0]}`} {...props}></h2>
        ),
        h3: ({ node, ...props }) => (
          <h3 id={`${props.children[0]}`} {...props}></h3>
        ),
        h4: ({ node, ...props }) => (
          <h4 id={`${props.children[0]}`}  {...props}></h4>
        ),
        h5: ({ node, ...props }) => (
          <h5 id={`${props.children[0]}`} {...props}></h5>
        ),
        h6: ({ node, ...props }) => (
          <h6 id={`${props.children[0]}`} {...props}></h6>
        ),
      }}
     
      children={searched ? theSearchedEntry : theEntry}
    />
  </div>

    )
}

The solution that I have tried to use is React lazy for the route
App.js:

我尝试使用的解决方案是针对路径App.js的反应延迟：

<Routes>
   <Route path='/entry/:entryId' element={<EntryPrivateRoute  />}/>
</Routes>

EntryPrivateRoute.js:

EntryPrivateRoute.js:

const SingleEntry = lazy(() => import('../components/SingleEntry'));

const EntryPrivateRoute = () => {
    const [loaded, setLoaded] = React.useState(false)
    let {user} = useContext(AuthContext)
    const params = useParams();
    React.useEffect(function(){
        fetch('/entries/' + params.entryId)
        setLoaded(true)
    })
    },[])
   
    if (loaded){
       
        if (user != null){
                 return user.approved  ?  <Suspense fallback={<div>Loading...</div>}><SingleEntry id={params.entryId} /></Suspense> : <Navigate to="/login" />
        }
        else{
            return(
            <Navigate to="/login" />
            )
        }
    }
}

export default EntryPrivateRoute;

This solution hasn't worked for me and lazy is not working so how can I solve it whether by adjusting lazy component or use another solution?

这个解决方案对我不起作用，懒惰也不起作用，那么我该如何解决它，无论是通过调整懒惰组件还是使用其他解决方案？

Well, the issue seems to be related to the first useEffect you have in SingleEntry, it has no dependency array so the callback function is executed at every render.

这个问题似乎与SingleEntry中的第一个useEffect有关，它没有依赖项数组，因此回调函数在每次呈现时都会执行。

If you want the run the useEffect callback to run once the component is renedered the first time, so a single time, chenge it as the following:

如果希望在组件第一次重新呈现后运行useEffect回调，因此只需一次，请按如下方式更改它：

React.useEffect(function () {
     fetch('/entries/' + props.id)
          .then(res => res.json())
          .then(data => {
               setTheEntry(`${data.body}`)
               setTheTitle(`${data.title}`)
          })
     }
, [])