score:1

does this somehow affect reactdom render?

not really. it react only concerns itself with dom updates.

if the element it renders inside is display: none then the react rendering process will generate the dom inside that element.

then, subsequent to the react rendering, the browser will convert the dom to something rendered on screen (which will be nothing because the container is display: none).

score:1

if you set the visibility to hidden, hovering over the invisible component will not trigger the :hover styles to take effect.

what is odd is that if you inspect element and toggle the :hidden styles then it will properly show up.

const hovercountdown = () => (
  <span>countdown</span>
);

//document.addeventlistener('domcontentloaded', () => {
  reactdom.render(
    <hovercountdown />,
    document.getelementbyid('hover-countdown')
  );
//});
.wrapper {
  background: #efe;
}

#hover-countdown {
  visibility: hidden; /* will render fine if removed */
}

#hover-countdown:hover {
  visibility: visible;
  color: #040;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div class="wrapper">
  <div id="hover-countdown"></div>
</div>


Related Query

More Query from same tag