function called infinite times in react while inView-CodePudding

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

import React, { useEffect, useRef } from 'react';

import { useNavigate } from 'react-router-dom';

import { useInView } from 'react-intersection-observer';


const About = () => {
  const navigate = useNavigate()
  
  const { ref, inView, entry } = useInView({
    
  });
  
 
  
    if(inView)  {navigate('/#about')}

  
  return (
    <div ref={ref}  className='about-container' id="about">
      
      
       
    </div>
  )
}

export default About

CodePudding user response：

The problem is you are calling navigate('/#about') directly which causes a loop for that component re-rendering. The fix could be

import React, { useEffect, useRef } from 'react';

import { useNavigate } from 'react-router-dom';

import { useInView } from 'react-intersection-observer';


const About = () => {
  const navigate = useNavigate()
  
  const { ref, inView, entry } = useInView({
    
  });
  
   //when your `inView` value change, you change hash
   useEffect(() => {
      if(inView)  {navigate('/#about')}
   }, [inView])
  
    

  
  return (
    <div ref={ref}  className='about-container' id="about">
      
      
       
    </div>
  )
}

export default About

CodePudding user response：

Looks like your getting stuck in an infinite loop because of this line

if(inView)  {navigate('/#about')}

When the About component loads it shows your div with the #about id causing it to be inView. This in turn calls navigate which takes you to the #about div again, repeating over and over again.

From my understanding the inView hook should be used to record metrics like how often someone scrolls past a certain point or to trigger some sort of Javascript code like showing a modal when someone gets to the bottom of the page. You could always use it to navigate to a new component just not the same one.