Scrolling around using ScrollArea in react-nodegui leads to an eventual 100% CPU usage as per the macos monitor. My code is something like the following:

<ScrollArea style={styles.list}>
        <View>
          {values.map((val, i) => (
            <View style={i % 2 !== 0 ? styles.rowAlternate : styles.row}>
              {val.map((column, c) => (
                <View style={styles.rowColumn + `width: ${headers[c].width}px;`}>
                  <Text>{column}</Text>
                </View>
              ))}
            </View>
          ))}
        </View>
</ScrollArea>

I'm displaying about 75 rows

Of course scrolling looks a bit junky (low fps) and that's how I noticed the problem! Mine is a 15 inch MacBook pro (2017) running Mojave

Did anyone experience something similar? Any quickfixes? The next steps would be to file an issue on Github but I'd like an informal confirmation first :)

December 28, 2019 at 8:31pm

Deleted

8:31pm

Added missing key props, still not better :/

December 29, 2019 at 3:51am

Atul R@a7ul

Team

3:51am

Thats super weird, i am running around 1500 items inside scrollview without cpu issues

3:51am

Could you raise a issue on github with more details?

9:24am

Ok, I just ran a test

import React from "react";
import { Renderer, Text, Window, ScrollArea, View } from "./index";
const values: string[][] = [["hello", "world"]];
for (let i = 0; i < 175; i += 1) {
  values.push(["hello" + i, "world" + i]);
}
const headers: { width: number }[] = [
  {
    width: 100
  },
  {
    width: 200
  }
];
const styles = {
  list: ``,
  rowAlternate: `flex-direction: 'row';`,
  row: `flex-direction: 'row';`,
  rowColumn: ``
};
const App = () => {
  return (
    <Window>
      <View style={containerStyle}>
        <ScrollArea style={styles.list}>
          <View>
            {values.map((val, i) => (
              <View
                key={`r${i}`}
                style={i % 2 !== 0 ? styles.rowAlternate : styles.row}
              >
                {val.map((column, c) => (
                  <View
                    key={`c${c}`}
                    style={styles.rowColumn + `width: ${headers[c].width}px;`}
                  >
                    <Text>{column}</Text>
                  </View>
                ))}
              </View>
            ))}
          </View>
        </ScrollArea>
      </View>
    </Window>
  );
};
const containerStyle = `
  flex: 1; 
  justify-content:'center'; 
  border: 1px solid blue;
  padding: 10;
`;
Renderer.render(<App />);

The CPU jumps to 30% during rendering and then goes down to near 0, which is what is expected.

9:24am

I am running MacOS Catalina and latest NodeGui version

9:29am

Demo link: https://filebin.net/3wo8rdievc34l0wy/Screen_Recording_2019-12-29_at_14.51.48.mp4?t=81m17a9n