It turns out that in React 16, there are now two different methods for rendering on the client side:
render() for when you are rendering the content solely on the client side, and
hydrate() for when you are rendering on top of server-side rendered markup. Because React is backwards compatible,
render() will continue to work when rendering on top of ser…
…, “p1” and “p2” end up with different hidden classes as a result of the different transition paths. In such cases, it’s much better to initialize dynamic properties in the same order so that the hidden classes can be reused.