width and height undefined if "ref div" is located after conditional rendering

Hi Masianok,

thanks for the library.

I have the following problem:

const [result, reexecuteQuery] = useGetMissionsTimeLineQuery({
    variables: {
      id: "7d99fb36-936b-4f40-81e6-0cbfce5190da",
      isActive: true,
      memberId: "xxxx",
    },
  });
  const { data, error, fetching } = result;
  const onResize = useCallback(
    () => {
       console.log('resize')
    },
    [],
  )

  const { width, height,ref } = useResizeDetector({onResize});
...
return <div ref={ref}>{`${width}x${height}`}</div>
`

work accordingly description.

But if I add: conditions before the final div:

  if (!data) return <div>Loading</div>;
  if (fetching) return <div>Loading</div>;
  if (error) return <div>error</div>;
  return <div ref={ref}>{`${width}x${height}`}</div>

witdhand height are undefined for ever.

Is it a bug, or did I use the library wrong ? Thanks for your help.

[barbalex]

This is pretty nerve racking. I have tried all kinds of settings (refreshMode, -rate, -Options). Without any I get undefined and it stays that way. With

{
    refreshMode: 'debounce',
    refreshRate: 300,
    refreshOptions: { trailing: true },
  }

the component renders twice after receiving the width. But id does return a width value.

So:

1. does not work without options
2. renders twice instead of once

I have conditional rendering too. But removing it seemed to change nothing.

[Capsicum42]

Thank for the info. I corrected the links.