If the functional component re-render it takes random position

[manojf22]

🐛 Random transform rotate position on re-render

I used my tilt component on a child component, when I change any state value from the parent component then my tilt move some random position.

By default the style value of the tilt element is transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)

but once the component re-render then the tilt element's style value is transform: perspective(1000px) rotateX(-20deg) rotateY(20deg) scale3d(1, 1, 1) by default

App.js (Parent component)

import React from 'react';
import SideMenu from "./Components/SideMenu";

function App() {
  const [test, setTest] = React.useState(0);
  setTimeout(()=>{
     setTest(test + 1);
  }, 2000);
  return (
    <>
      <SideMenu />
    </>
  );
}
export default App;

SideMenu.js (Child component)

import React from "react";
import Tilt from 'react-parallax-tilt';
import "./SideMenu.scss";

function SideMenu() {

  const [tilt, setTilt] = React.useState({
    className: 'menu',
    glareEnable: true,
    scale: 1.05,
    glareMaxOpacity: 0.05,
    glareColor: 'white',
    glarePosition: 'all'
  });

  return <aside>
    <nav>
      <Tilt {...tilt} >
        <a href="/" className="link">
          <i className="mdi mdi-spider-web" />
          <span>Dashboard</span>
        </a>
      </Tilt>
    </nav>
  </aside>
}

export default SideMenu;

SCSS code

nav {
    display: flex;
    flex-wrap: wrap;
    .menu{
      position: relative;
      width: 50%;
      height: 120px;
      border-radius: 6px 6px 0 0;
      transform-style: preserve-3d;
      i {
        transform: translateZ(20px);
        display: block;
        font-size: 36px;
      }
      span{
        transform: translateZ(30px);
        font-weight: 100;
      }
      .link {
        width: 100%;
        height: 120px;
        color: #ffffff;
        text-decoration: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
      }
    }

[Marko Kosir]

Hi @manojf22, thank you for concise bug description, but can't reproduce.
Please provide demo in online code editor CodeSandbox or similar.

Issues without a reproduction link are likely to stall.

[Marko Kosir]

Closing this issue since inactivity, feel free to reopen it!