Preact fails ref

preact-fails-ref.jsx

// failed ref
const MyShinyComponent = ({ isFooShown }) => (
  <div className='wrapper'>
    { isFooShown && (
      <div className='foo'>Foo</div>
    )}
    <div
      className='bar'
      ref={ someRefFunc }
    >
      Bar
     </div>
  </div>
)

// fix with empty element
const MyShinyComponent = ({ isFooShown }) => (
  <div className='wrapper'>
    { isFooShown
        ? <div className='foo'>Foo</div>
        // returning empty div doesn't cause calling ref with `null`
        : <div />
    }
    <div
      className='bar'
      ref={ someRefFunc }
    >
      Bar
     </div>
  </div>
)

// fix with key (best solution)
const MyShinyComponent = ({ isFooShown }) => (
  <div className='wrapper'>
    { isFooShown && (
      <div className='foo'>Foo</div>
    )}
    <div
      className='bar'
      ref={ someRefFunc }
      key='bar'
    >
      Bar
     </div>
  </div>
)

Preact calls ref with null after isFooShown changes from true to false and doesn't call ref after that.

There is dedicated issue: preactjs/preact#753