Как правильно использовать useEffect ()?

Question

Я хочу изменить стиль с помощью прокрутки.

Этот код работает неправильно. Когда я переворачиваюсь слишком много раз и слишком быстро, браузер останавливается, поэтому sh.

Я думаю, что использовал useEffect() неправильно. Как я могу решить эту проблему.

const ArticleItem = ({title, content, active, chapter, program, id, scrollPos}) => {
  const ref = useRef(null);
  const client = useApolloClient();

  useEffect(() => {
    if(ref.current.offsetTop <= (scrollPos + 200)) {
      client.writeData({data: {
        curChapter: chapter.num,
        curArticle: id,
        curProgram: program.name
      }});
    }
  });

  if(active === false)
    return ( // Inactive Article
      <div className='section-item' ref={ref}>
        <h2>{title.toUpperCase()}</h2>
        <ReactMarkdown source={content} />
        <br />
      </div>
    )
  return (  // Active Article
    <div className='section-item active' ref={ref}>
      <h2>{title.toUpperCase()}</h2>
      <ReactMarkdown source={content} />
      <br />
    </div>
  )
}

В результате я столкнулся с этим предупреждением.

Предупреждение: превышена максимальная глубина обновления. Это может произойти, когда компонент вызывает setState внутри useEffect, но useEffect либо не имеет массива зависимостей, либо одна из зависимостей изменяется при каждом рендеринге.

Я думаю, что это является причиной проблемы? !

Answer 1

Исходя из моего комментария выше, вам также необходимо включить массив зависимостей для useEffect. В настоящее время он работает бесконечно. Возможно, вы хотите включить в него scrollPos, поэтому он будет срабатывать только после изменения scrollPos.

Попробуйте выполнить следующее:

useEffect(() => {
    if(ref.current.offsetTop <= (scrollPos + 200)) {
      client.writeData({data: {
        curChapter: chapter.num,
        curArticle: id,
        curProgram: program.name
      }});
    }
}, [scrollPos]);

Надеюсь, это поможет!

Answer 2

Что ж, проблема возникает все время, когда вы можете использовать прослушиватель событий scroll и вносить изменения при его запуске.

const [scrollItem, setScrollItem] = useState(null);

const handleScroll() {
  if(scrollItem) {
     // logic goes here
  }
}

useEffect(() => {
  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []); // initialize event only once

return (
   <div ref={setScrollItem}>
      ...
   </div>
);

РЕДАКТИРОВАТЬ

Избегайте этого решения, @norbitrial прав