Inconsistent behavior on conditional render on mobile

[peter1357908]

trafficstars

If I have a component that looks like this:

const Foo = () => {
  const [state, setState] = useState(null);
  const renderBar = () => {
    if (state) { return (<div>Baz 1</div>); }
    return (<div>Baz 2</div>);
  }
  return (
    <Draggable>
      {renderBar()}
    </Draggable>
  );
}

Then there is a chance that when either Baz 1 or Baz 2 gets rendered, it's not draggable. I suspect that this has to do with the state changing and Draggable only applying to whichever gets the initial render.

This observation comes from about 2 hours of debugging... for context, in my project, state is actually passed into the Foo component and can be set outside of Foo. Baz 2 is a table of a lot of components, whose slow rendering may or may not have contributed to this inconsistent behavior.

I resolved the inconsistency by individually wrapping Baz1 and Baz2 like this:

const Foo = (props) => {
  const [state, setState] = useState(null);
  const renderBar = () => {
    if (state) { return (
      <Draggable>
        <div>Baz 1</div>
      </Draggable>
    ); }
    return (
      <Draggable>
        <div>Baz 2</div>
      </Draggable>
    );
  }
  return renderBar();
}

Is this inconsistency specific to react-draggable or is it an expected behavior of react?