Your app looks all ok except 2 points. I can't test my guess, but I'm almost entirely sure that your problem comes from those 2.
Both parts that seem problematic are located in index.js, here there are:
window.addEventListener("scroll", () => {// gets the current height
let scroll = document.body.scrollTop || document.documentElement.scrollTop;
let arrowUp = document.querySelector(".arrow-up-btn").style;
scroll >= 1000 ? arrowUp.display="flex" : arrowUp.display = "none";
});
window.addEventListener("resize", ()=> {// gets the current width
this.setState({
currentPageWidth: window.innerWidth || document.documentElement.clientWidth
})
});
The first code block is expensive because:
- The scroll event is fired very frequently.
- You don't listen for scroll passively (it'd be a good idea though).
- You set the
style much more frequently than needed.
However, I think, that it is the second code block that causes mobiles to glitch.
Check out this answer to see why the resize event is fired on mobiles more frequently than on desktop.
- Now, each time the resize event is triggered, the state of
MainApp
is updated.
- Each time
MainApp is updated, React recalculates all its children.
- By default, React just re-run render of each child & compares the output.
Considering you have all routes & all components inside the MainApp & you didn't implement any optimizations (React.PureComponent, lazy loading for routes, etc.) React will have to recalculate what the entire site looks like on each resize event.
The easiest fix would be to store currentPageWidth in a ref instead of state.
Another possible problem is that by attaching listeners inside the render method, you're attaching new listeners on each single render without clearing any of previously added listeners.
