当屏幕尺寸发生变化时触发 useEffect

Question

I have the following useEffect

useEffect(() => {
  Draggable.create(sliderRef.current, {
    type: "x",
    bounds: {
      minX: 0,
      maxX: -document.getElementById('slider').offsetWidth + window.innerWidth
    }
  });
}, [document.getElementById('slider')])

I want to trigger it when the screen size changes I tried to pass the parameter in the dependencies array

window.innerWidth or document.getElementById('root')

however, without success... I appreciate help

Answer 1

useEffect need to have a dependency that changes if you want it to re-call your callback, so having plain document.getElementById won't do the trick.

Personally I recommend using [ResizeObserver][1] that already optimized for these type of event,

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // ... entry has the full info about your element dimensions
     
  }
 
});

resizeObserver.observe(document.getElementById('slider'));

In React app I would use useEffect to start and stop observing the element size

function App(){

  useEffect(() => {

    // start listening on app start
    resizeObserver.observe(document.getElementById('slider'));

    return () => {
          // clean 
          resizeObserver.unobserve(document.getElementById('slider'));
    }
  }, []);

}

Answer 2

You are trying to use imperative DOM code inside the React lifecycle - you can't (at least not this way).

useEffect dependencies can only depend on variables that React tracks: state and props. React can't know when document.getElementById('slider') changes. It doesn't know what that is, or how to check it. The dependency-change-checking code isn't run in a loop, constantly checking variables. It only runs when this component's state or props change. If they don't change, React won't check the dependencies, and won't know they have changed.

You should manage any code that needs to listen to window changes needs to run the old vanilla JS way.