Next.js用react-cool-inview实现懒加载跳转时出现状态更新警告

问题原因 #

该警告是路由跳转后Footer组件已卸载，但react-cool-inview的监听逻辑未被清理，后续触发状态更新时指向了已销毁的组件实例导致。你当前仅在元素进入视口的onEnter回调中执行了unobserve，如果组件在元素进入视口前就被卸载（比如用户快速切走页面），监听器会一直残留，触发回调时就会报这个内存泄漏警告。同时你的代码还存在变量名笔误，useInView返回的是驼峰命名的inView，你写的小写inview会导致懒加载内容无法正常渲染。

修复代码 #

import React, { useEffect } from "react";
import "./style.scss";
import useInView from "react-cool-inview";
import { Link } from 'routers';

const Footer = () => {
  // 额外解构出unobserve方法用于卸载时清理
  const { observe, inView, unobserve } = useInView({
    onEnter: ({ unobserve }) => unobserve(),
  });

  // 增加卸载清理逻辑
  useEffect(() => {
    return () => unobserve();
  }, [unobserve]);
 
  return (
    <div className="footer pt-4 pb-5" ref={observe}>
      {/* 修正变量名笔误 */}
      {inView && "something"}
    </div>
  );
};

export default React.memo(Footer);

修复说明 #

• useEffect的清理函数会在组件卸载时自动执行，不管元素有没有进入过视口，都能保证监听器被正确移除，不会残留异步更新逻辑
• react-cool-inview的unobserve方法是幂等的，多次调用不会产生副作用，所以和onEnter里的调用不会冲突
• 修正变量名后懒加载逻辑可以正常触发

内容的提问来源于stack exchange，提问作者Khiêm Lê Đình