1

I have got a dependency imageNo in useEffect() as I want the element to go up when it's being hidden, but scrollIntoView() does not work properly whenever imageNo changes, but it works when clicking a button.

Updated

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

const Product = ({ product }) => {
  const moveRef = useRef(product.galleryImages.edges.map(() => React.createRef()));
  const [imageNo, setImageNo] = useState(0);

  useEffect(() => {
    const position = moveRef.current[imageNo]?.current.getBoundingClientRect().y;

    console.log('imageNo', imageNo); // <<<<----- This is also called whenever scrolling excutes.

    if (position > 560) {
      moveRef.current[imageNo]?.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  }, [imageNo]);

  const test = () => {
    const position = moveRef.current[imageNo]?.current.getBoundingClientRect().y;

    if (position > 560) {
      moveRef.current[imageNo]?.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  };

  // This changes `imageNo`
  const handleScroll = () => {
    let id = 0;

    console.log('refs.current[id]?.current?.getBoundingClientRect().y', refs.current[id]?.current?.getBoundingClientRect().y);
    const temp = imgArr?.find((el, id) => refs.current[id]?.current?.getBoundingClientRect().y >= 78);

    if (!temp) id = 0;
    else id = temp.id;

    if (refs.current[id]?.current?.getBoundingClientRect().y >= 78) {
      setImageNo(id);
    }
  };


  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);


  return (
      <div className="flex flex-row layout-width ">
        {/* aside */}
        <div className="sticky flex self-start top-[76px] overflow-y-auto !min-w-[110px] max-h-[90vh]">
          <div className="">
            {product.galleryImages.edges.map((image, i) => {
              return (
                <div ref={moveRef.current[i]} key={image.node.id}>
                    <Image />
                </div>
              );
            })}
          </div>
        </div>
        <button onClick={test}>btn</button>
      </div>
  );
};

export default Product;

Any suggestion will be greatly appreciated.

Uhney
  • 379
  • 1
  • 6
  • 23
  • Can you try without `behavior: 'smooth'`? I suspect that's what's causing the problem. This answer offers a workaround: https://stackoverflow.com/a/73297659/330565 – Nikita Rybak May 08 '23 at 03:27

1 Answers1

0

I couldn't see where the imageNo is coming from? If it is just a normal javascript variable then it wouldn't trigger re-render even after putting it inside the useEffect's dependencies array. If you want to make the re-render happen based on imageNo then make a useState variable for imageNo and change it using setter function that useState provides.

Helpful note - read about useState and useEffect hooks in React.

Shubham Kumar Singh
  • 1
  • I have updated my question and added where `imageNo` is coming from. I put `imageNo` inside of `uesState`, but still not rerendered. – Uhney Feb 19 '22 at 11:37
  • console.log imageNo inside a new useEffect and provide imageNo in its dependency array. And see if imageNo is actually being changed or not. I'm 100% sure that the setter of imageNo is not being called. – Shubham Kumar Singh Feb 20 '22 at 12:52
  • I checked console and `imageNo` is being changed.. – Uhney Feb 20 '22 at 23:42
  • console.log('imageNo', imageNo); // <<<<----- This is also called whenever scrolling executes. If the above line is called on scroll then this means your useEffect is re-executing. Then there could be nug in this if (position > 560) block. console.log inside this if block and check – Shubham Kumar Singh Feb 21 '22 at 05:21
  • In `if (position > 560)` block, the console also appears.. – Uhney Feb 21 '22 at 06:34
  • moveRef.current[imageNo]?.current.scrollIntoView({ behavior: 'smooth', block: 'center', }); Why do you have current inside current? – Shubham Kumar Singh Feb 22 '22 at 05:21
  • How did you solve this issue? I am also facing this similar issue. – Anwar Hossain Nov 20 '22 at 05:31