Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Potential memory leak when using the new ServerStyleSheet

See original GitHub issue

Version

2.0.0

Today I picked up that memory usage was increasing continuously on one of our servers and I tracked it down to a commit which related to upgrading to the latest version of styled-components and editing some server-side code.

It seems that there may be a problem with the ServerStyleSheet as we were using getCSS before and this problem was not present.

Any help would be much appreciated!

The server-side rendering function which is called looks like this:

function serverSideRender(req, res, store) {
  const preloadedState = store.getState()
  const sheet = new ServerStyleSheet()
  const context = {}

  const markup = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <StyleSheetManager sheet={sheet.instance}>
          <App />
        </StyleSheetManager>
      </StaticRouter>
    </Provider>,
  )

  const helmet = Helmet.renderStatic()

  res.status(200).send(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
        ${helmet.link.toString()}
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="/client.css" />
      </head>
      <body>
        <div id="root">${markup}</div>
        <script>window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}</script>
        <script src='/client.js'></script>
      </body>
    </html>
  `)
}

Issue Analytics

State:
Created 6 years ago
Comments:15 (6 by maintainers)

Top GitHub Comments

8reactions

DeividasKcommented, Jul 27, 2017

@philpl @geelen you are correct. This particular issue happened to me, because I was using babel-plugin-styled-components only for the main repo, but not for the package that is shared between different repos. Adding the plugin to the shared package fixed my issue. Thanks for the help!

1reaction

cdimitroulascommented, Aug 2, 2017

@geelen thanks for your comment - it seems we misunderstood the correct use of the StyleSheetManager and that was what caused the memory leak. That has been corrected now and everything seems to be working properly 👍

Top Results From Across the Web

Hunting memory leaks in a server side rendered React ...

The possible solution can be to ensure a new instance of those variables for every request. You can achieve that by wrapping those...

SSR memory leaks - help - Meteor forums

I'm getting a severe memory leak on Galaxy if I leave my SSR code. It causes my app to restart every half our...

Configuring the memory leak policy - IBM

When a classloader memory leak is detected, WebSphere® Application Server notifies you with informational messages in the log and by taking JVM heapdumps...

Causes of Memory Leaks in JavaScript and How to Avoid Them

In this article, we will explore programming patterns that cause memory leaks in JavaScript and explain how to improve memory management.

Memory leak - Wikipedia

In computer science, a memory leak is a type of resource leak that occurs when a computer ... be diagnosed by a programmer...