Potential Performance Issue with Material UI's withStyles Function

I've been given the task of optimizing the loading speed of a page in our react redux web app.

When the page load action is triggered, there seems to be a slight freeze lasting about half a second.

After checking the profiler, everything seems fine at first glance.
Flame Graph

There are no unnecessary rerenders, and the only yellow warning I see lasts around 10 milliseconds.

Diving into the ranked tab in the profiler reveals a different story, showing that most of the time is spent in withStyles().
Ranked Graph

We are using the material-ui approach of CSS in JS via withStyles() and it seems like the use of withStyles() is significantly impacting the loading speed.
Is this really the case? Or could it simply be a matter of "I'm rendering too many things at once"?

Switching from CSS in JS back to plain CSS would require a significant effort. However, after spending an hour removing the CSS in JS, I noticed a performance improvement of about 40%. It's unclear how much of that improvement is specifically due to withStyles or just the overall process of styling elements on the page.

cssreactjsperformancematerial-uicss-in-js

Answer №1

Most of the time spent in WithStyles is actually dedicated to JSS, leaving little room for improvement on the Material-UI side.

Source

However, there is a potential speed enhancement that doesn't require a complete overhaul of your JS CSS styling approach - switching to makeStyles over withStyles

More details can be found here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the size of the input field as text is being typed in

Can a text input box be automatically resized as text is entered? I've been looking online but haven't come across any solutions. ...

javascripthtmlcss

Adjusting the position of just a single box in a flexible layout

I have multiple columns set up in a similar way. <div style="display: flex;flex-direction:column"> <main class="main-contents" role="main">TopHeader </main> <div> content A</div> <div> conte ...

htmlcssflexbox

Center the p tag vertically

To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text. It's important to k ...

htmlcssparagraph

What's the reason for not being able to customize classes for a disabled element in Material-UI?

Currently, I am utilizing Material-UI to style my components. However, I am facing challenges when trying to customize the label class for disabled buttons. Despite setting a reference as "&$disabled", it does not yield the desired results. import Rea ...

javascriptcssreactjsbuttonmaterial-ui

Learn how to integrate Firebase Authentication with Google's One Tap Login feature

I recently developed a web application using Firebase and React.js, where I successfully integrated Google sign-in. In an attempt to enhance the user experience, I decided to implement Google One Tap Sign-In by leveraging the react-google-one-tap-login npm ...

reactjsfirebasefirebase-authenticationgoogle-one-tap

Switching back and forth between JQuery and CSS display changes

My challenge involves utilizing a JQuery file to present one question at a time in a quiz format. Upon clicking the submit button, the intention is to progress to the subsequent question. However, I have encountered an issue where the transition occurs mom ...

jqueryhtmlcss

Tips for adjusting the height of a Safari extension during runtime

After successfully developing a Safari extension, I am facing an issue with adjusting the width and height of the popover dynamically at runtime. Can anyone provide insights on how to modify the dimensions of the popover based on its content? ...

javascripthtmlcsssafarisafari-extension

Unable to conceal adjacent element when z-index is set as 1

I encountered an issue where a modal is overlapping another element, and the close button of the underlying element has a z-index of 1. Despite creating a new modal with its own close button, the original close button remains visible on top. I attempted t ...

javascripthtmlcssreactjs

Stack div on top of div

It seems like I'm facing a simple problem that needs a solution. I have two container divs .topwrap{ position:relative; top:100px; background:#00C; } </i> and .lowerwrap{ position:relative; ...

htmlcssposition

Managing the browser's "back" button functionality in React

I am currently using "react-dom-router v6.3.0" (strictly!) and I am struggling to figure out how to manage the browser's "back" button functionality. Specifically, I want to be able to detect when the user clicks the back button so that I can display ...

reactjstypescriptreact-routerreact-router-dom

Guide to getting Material-UI Dialog up and running smoothly in your React application

I'm currently working on a project using material-UI, and I'm having trouble with the Dialog component not working properly. Despite trying various solutions, I haven't been able to get it to function correctly in my React application with m ...

javascripthtmlreactjsreact-reduxmaterial-ui

Unable to import file: ~bootstrap/scss/functions. The file cannot be found or is unreadable.", "formatted": "Error: File import failed: ~

Attempting to launch a new project, I'm facing difficulties loading CSS files onto the login page. Upon checking the npm build, I encountered an error. Additionally, there seems to be an issue with loading images stored in my folders. As a frontend n ...

djangoreactjsnpmbootstrap-4

There seems to be an issue with byRole as it is failing to return

Currently in the process of migrating my unit test cases from Jest and Enzyme to React Testing Library. I am working with Material UI's Select component and need to trigger the mouseDown event on the corresponding div to open the dropdown. In my previ ...

javascriptreactjsmaterial-uireact-testing-library

The menu does not adjust to fit the site properly, causing the video/photos to appear off to the right on smaller screens

Earlier, I received some fantastic help for which I am extremely grateful. However, I find myself in need of your expert assistance once again. The website I am currently working on is . After simplifying the code and removing absolute positioning, I enco ...

csshtmlscale

Issues with React router arise once the app has been built

I am new to utilizing react and react-router in my project. I have built the application using create-react-app and now I am facing an issue with routing between two main pages. After trying different approaches, I managed to get it working during develop ...

javascriptreactjsnpmbuildreact-router

Positioning of Ajax modal popups on smaller screens

In my Asp.net/C# web application, I have a modal popup that contains multiple placeholders. However, I am facing an issue when trying to access the modal popup on smaller screens like iPads or iPhones. The page only displays half of the modal popup, maki ...

asp.netcssajax

Guide to making a Typescript type guard for a ReactElement type

I'm currently working with three TypeScript type guards: const verifyTeaserOne = (teaser: Teaser): teaser is TeaserOneType => typeof teaser === 'object' && teaser.type.includes('One'); const validateTeaserTwo = ( ...

reactjstypescripttypescript-typestypeguards

What is the best method for deleting an uploaded image from a box?

My code is quite lengthy, so I'll just showcase the JavaScript portion here. Here is a snippet of my JavaScript code: <script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view- ...

javascriptphpjqueryhtmlcss

Achieving function components within React Router Dom V6

I need help with keeping my sidebar as a continuous function component without re-rendering every time the page changes from "/dashboard" to "/chat". This is how it looks currently: <div className="flex flex-col "> <BrowserRouter> ...

reactjsreact-routerreact-router-dom

Passing NextJS props as undefined can lead to unexpected behavior and

Struggling with dynamically passing props to output different photo galleries on various pages. One of the three props works fine, while the others are undefined and trigger a warning about an array with more than one element being passed to a title elemen ...

javascriptreactjstypescriptnext.js