triggerOnce prop not working for <InView />, creates infinite loop

[bushidavid]

Hey guys, I'm having a problem with IntersectionObserver. I have added the triggerOnce prop to the component but this seems to not be working, and it's causing an infinite loop.

The onChange triggers an handInView() function that updates data on database.

Below is my code:

'use client'

import Link from 'next/link'
import Image from 'next/image';
import {Card, CardBody} from "@nextui-org/card";
import { updateJobClicks } from '../actions/actions';
import { useRouter } from 'next/navigation';
import { InView, useInView } from 'react-intersection-observer';
import { updateJobViews } from '../actions/actions';

export default function Job({ ...props }) {

  const {ref, inView, entry} = useInView({
  });


  const date = new Date(props.created_at);
  const today = new Date(Date.now());

  const router = useRouter();

  const todayFormatted = today.toLocaleString('lu-LU', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  })

  const formattedDate = date.toLocaleString('lu-LU', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });


  const handleClick = async (e, jobId) => {

    e.preventDefault();

    console.log("inside handle click");
    const res = await updateJobClicks(jobId);

    console.log(res);

    router.push(`/job/${jobId}`)
  }

  const handleInView = async () => {
      console.log("inside handleInView");
  
      const res = await updateJobViews(props.id);
  
      console.log(res);

  }
 

  return (
    <InView as='div' triggerOnce onChange={(inView, entry) => { if(inView) handleInView(props.id) }} >
      <Link href={`/job/${props.id}`} className='flex flex-col items-center justify-center mb-2' onClick={(e) => handleClick(e, props.id)}>
        <Card className={`w-11/12 md:w-10/12 flex flex-col items-center justify-center px-2 pb-0.5`}>
          <CardBody className='flex flex-row items-start justify-between bg-slate-50 rounded-xl mx-2 mt-1.5'>
            <div className="w-[30%] max-w-[30%] md:w-[15%] md:max-w-[15%] flex flex-col justify-around ">
                <Image className="rounded-full" src={props.jobLogoUrl ? props.jobLogoUrl : "/Logo.jpg"} alt="company_logo" width={70} height={70}></Image>
            </div>
            <div className='flex md:flex-row flex-col md:justify-start md:items-center w-full pl-2'>        
                <div className='w-full md:w-[40%] md:max-w-[40%]'>
                    <h1 className="text-base">{props.title}</h1>{/* <h1>{job.job_title}</h1> */}
                    <h2 className="text-sm">{props.companyName}</h2>
                    <h3 className='text-sm'>{props.salaryMin +" to " + props.salaryMax + ' ' + props.currency}</h3>
                </div>
                <div className='w-full md:min-w-[30%] md:max-w-[30%]'>
                    <h1 className='text-md'> {props.worldwide ? "Worlwide" : `Remote from ${props.country}`}</h1>
                </div>
              </div>

          </CardBody>
          <div className='flex flex-row flex-grow w-full my-1'>
            <p className='text-xs font-extralight px-2 pt-0.5 mx-1 my-0.5'>{(formattedDate === todayFormatted) ? "today" : formattedDate}</p>

            {props.tags?.split(',').map(tag => (
              <p className={`text-xs font-extralight rounded-full border-1 px-2 pt-0.5 mx-1 my-0.5`} key={tag}>{tag}</p>
            ))}
          </div>
        </Card>
      </Link>
    </InView>
  )
}

Any idea what could be the problem? Could it be because the component is being rerendered?

[thebuilder]

I imagine this is Next.js remounting the entire component when you trigger a server action.

[bushidavid]

Confirmed. It seems Nextjs remounts the entire component after a server action.

I tried now with a simple API call and the triggerOnce worked as expected.