ReactJS simple hover works critical slow - reactjs

Question

Here's whole class . This example works. No error in ts compiler no errors in browser logs .
import * as React from "react";
import { Label } from "../../components/label/label";
import IApp from "../../globals/interfaces";
import { Tap } from "../../globals/types";
import Services from "../../services/services";
import { HeaderI, HeaderStateI } from "./interface";
import { getMenuStyle, getMyStyle } from "./style";
export class Header extends React.Component<HeaderI, HeaderStateI, any> {
public add = Services.addElement;
private myRef: React.RefObject<HTMLDivElement>;
private myDOM: Element | Text;
constructor(args: any) {
super(args);
this.state = {
enabledComponent: true,
visibility: true,
debugView: false,
elements: [],
myStyle: getMyStyle(),
menuStyle: getMenuStyle(),
menuItemStyle: [getMenuStyle(), getMenuStyle()],
menuIsOpen: false,
myEvent: null,
};
this.myRef = React.createRef();
this.add = this.add.bind(this);
}
// Override func
public componentDidMount() {
this.myDOM = this.myRef.current;
}
public render() {
if ( this.state.visibility === true ) {
return (
<div ref={this.myRef} style={this.state.myStyle} >
<Label myStyle={this.state.menuStyle}
name="headerName"
text="MENU"
onClick={this.clickEvent.bind(this)}
onMouseEnterHandler={this.hoverIn.bind(this)}
onMouseLeaveHandler={this.hoverOut.bind(this)} />
{this.state.elements.map((element: React.ReactElement<any>, index) => {
return <span ref={this.myRef} key={index} style={this.state.menuItemStyle[index]}
onClick={this.clickMenuItem.bind(this)}>{element}</span>;
})}
</div>
);
}
}
// Override func
public componentDidUpdate(prevProps: any, prevState: any) {
// Typical usage (don't forget to compare props):
}
// Override func
public componentWillUpdate(nextProps: any, nextState: any) {
// We should not call setState !
// if (nextState.open == true && this.state.open == false) {
// this.props.onWillOpen();
// }
}
private adaptCss(e: CustomEvent) {
// DEMO for css changes :
// Collect (this of class instance)
const self = e.detail.data.self;
// Make any changes in css
// Collect base or initial css
const myStyle = getMyStyle();
// Make changes
myStyle.background = "yellow";
// Setup state and nothing more
self.setState({
myStyle,
});
}
private printMe() {
// console.log("Layout Header is active and update is on");
}
private clickEvent(event: MouseEvent | TouchEvent) {
if (this.state.menuIsOpen === false) {
const myKey = "header.01";
const element1Args: IApp.NewElementArgsI = {
key: myKey,
onClick: null,
myStyle: null,
content: "HOME",
hoverIn: ((e) => this.hoverIn(e, myKey)),
hoverOut: ((e) => this.hoverOut(e, myKey)),
};
const myKey2 = "header.02";
const element2Args: IApp.NewElementArgsI = {
key: myKey2,
onClick: null,
myStyle: null,
content: "ABOUT",
hoverIn: ((e) => this.hoverIn(e, myKey2)),
hoverOut: ((e) => this.hoverOut(e, myKey2)),
};
this.add(element1Args);
this.add(element2Args);
// Set new state for menu
this.setState(
{menuIsOpen: !this.state.menuIsOpen},
);
} else {
// Menu is already visible , delete menu items
this.setState (
{
menuIsOpen: !this.state.menuIsOpen,
elements: [],
},
);
}
}
private clickMenuItem(event: MouseEvent | TouchEvent) {
const t = event.target as HTMLDivElement;
// Also possible to call event.target.textContent !
switch (t.textContent) {
case "HOME":
this.props.provide({instruction: "show_home"});
break;
case "ABOUT":
this.props.provide({instruction: "show_about"});
break;
default:
console.warn("No case for cleckMenuItem in bodyCOntent class!");
}
}
private hoverIn = (e: Tap, id: any) => {
const styleArrayCopy = JSON.parse(JSON.stringify(this.state.menuItemStyle));
this.state.elements.forEach((element: React.ReactElement<any>, index: number) => {
if (id === element.key) {
styleArrayCopy[index].color = "red";
} else {
styleArrayCopy[index].color = "initial";
}
});
if (this.state.elements.length === 0) {
const test = getMenuStyle();
test.color = "lime";
this.setState({
menuItemStyle: styleArrayCopy,
menuStyle: test,
});
} else {
this.setState({
menuItemStyle: styleArrayCopy,
});
}
}
private hoverOut = (e: Tap, id: any) => {
this.state.elements.forEach((element: React.ReactElement<any>, index: number) => {
if (id === element.key) {
const styleArrayCopy = JSON.parse(JSON.stringify(this.state.menuItemStyle));
styleArrayCopy[index].color = "initial";
this.setState({
menuItemStyle: styleArrayCopy,
});
}
});
}
}
I get style like that :
export function getMenuStyle(): IApp.MyMinimumCssInterface {
return {
display: "block",
background: "#445566",
height: "30px",
width: "100%",
textAlign: "center",
color: "inherits",
} as IApp.MyMinimumCssInterface;
}
On hover in and out i have ~400ms delay . If i moving up/down there is no hover effect. This is so bad. What will be when i add large assets add more code...
I detect very slow executing in not just this example even most simple example from reactJS tutorials ?!
I am also interested in React.ReactElement Object instance . Is it possible for OverRide some func - Like updateDid ?
To missunderstund from comment This is from React site :
The style attribute accepts a JavaScript object with camelCased
properties rather than a CSS string. This is consistent with the DOM
style JavaScript property, is more efficient, and prevents XSS
security holes. For example:
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
I use it the same principle.
Updated , now looks like :
// Render
{this.state.elements.map((element: React.ReactElement<any>, index) => {
return <span ref={this.myRef} key={index} style={this.getStyle(element, index)} onClick={this.clickMenuItem.bind(this)}>{element}</span>;
})}
private hoverIn = (e: Tap, id: any) => {
const local: boolean[] = [];
this.state.elements.forEach((element: React.ReactElement<any>, index: number) => {
if (id === element.key) {
local.push(true);
} else {
local.push(false);
}
});
Any explanation ??

Answer 1

I finally found solution for very slow work flows.
There is no connections with React at all.
I have global.css who's loading on begin. First i noticed that only text delay.
I create text shadow and i most suspect on shadow but it was transition.
This code is most expensively code was :
-webkit-transition: color 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: color 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: color 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: color 300ms cubic-bezier(0.42, 0, 0.58, 1);
I remove this part of code.
Maybe this answer will help somebody .