Still warning in StrictMode

[infodusha]

Warning is the same as #68 Looks like the test id ref is used fails on first render(ref is undefined)

[amymc]

+1 Still an issue for me when i pass in targetDomEl

[nguyenmanh1507]

@amymc @infodusha ref aren't guaranteed to be set in first render. You can use querySelector instead

[maslianok]

Can someone provide a code snippet that reproduces the bug? The best would be a codepen or any other online IDE

I see many people facing this issue. We should definitely fix it...

[infodusha]

@maslianok can do it after quarantine will end

[infodusha]

@nguyenmanh1507 querySelector is not for multiple elements

[maslianok]

@maslianok can do it after quarantine will end

Yes, please do! Maybe we will finally resolve this problem :)

[tahv0]

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of ChildWrapper which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

[Parxer]

@maslianok Here's one: https://codesandbox.io/s/magical-meitner-s95bj?file=/src/App.js

[maslianok]

@maslianok Here's one: https://codesandbox.io/s/magical-meitner-s95bj?file=/src/App.js

@Parxer great, thanks 👍

[maslianok]

Thanks everyone for helping with this issue.

In v5.0.0 we fully refactored the logic to work with DOM elements. Please read release notes.

@Parxer regarding your code snippet - this one should work without any warnings:

import React, { useState, useRef } from 'react';
import { withResizeDetector } from 'react-resize-detector';

const Component = ({ width, height, targetRef }) => {
  const [color, setColor] = useState('red');

  useEffect(() => {
    setColor(width > 500 ? 'blue' : 'red');
  }, [width]);

  return <div ref={targetRef} style={{backgroundColor: color, height: 150}} />;
}

const AdaptiveComponent = withResizeDetector(Component);

const App = () => <div>
  <p>The rectangle changes color based on its width</p>
  <AdaptiveComponent/>
</div>;

export default App;

or, another approach, without withResizeDetector HOC (fewer changes compared to the initial example)

const AdaptiveComponent = () => {
  const ref = useRef();
  const [color, setColor] = useState('red');
  const onResize = width => setColor(width > 500 ? 'blue' : 'red');

  return (
    <ReactResizeDetector onResize={onResize} targetRef={ref}>
      <div ref={ref} style={{ backgroundColor: color, height: 150 }} />
    </ReactResizeDetector>
  );
};

const App = () => (
  <div>
    <p>The rectangle changes color based on its width</p>
    <AdaptiveComponent />
  </div>
);