Skip to content

MathKeyboard component enhance perf#1

Open
ShaMan123 wants to merge 8 commits into
ggunti:masterfrom
ShaMan123:master
Open

MathKeyboard component enhance perf#1
ShaMan123 wants to merge 8 commits into
ggunti:masterfrom
ShaMan123:master

Conversation

@ShaMan123

Copy link
Copy Markdown

Refactored to use FlatList
It seems that it re-renders the keyboards every time I press a button (that displays a keyboard) which is expensive. I suggest you solve this.
Perhaps by joining all keyboards into one.... There's a few ways to handle this.
But it is not purely a problem of the library. Sure, it's expensive to render math, but this is minor if you handle the unnecessary renders.
Once you manage to render all keyboards just once and then just display them again and again this issue will seize to exist.

ShaMan123 added 6 commits May 24, 2020 19:31
use with caustion because this jams the ui, though theoretically it shouldn't
drop while loop enhanced perf significantly
@ShaMan123

Copy link
Copy Markdown
Author

023ef44

@ShaMan123

Copy link
Copy Markdown
Author

This might speed up things even more

@ShaMan123

Copy link
Copy Markdown
Author

KeyboardAccessoryView needs work, it seems to be a very expensive component

@ShaMan123

Copy link
Copy Markdown
Author

keyExtractor needs better keys

@ShaMan123

Copy link
Copy Markdown
Author

ezgif com-resize

@ShaMan123

Copy link
Copy Markdown
Author

Did you look into handling the excessive re-rendering? I would try merging all keyboards into one lazy loading tabbed keyboard.
Do you mind if I add a link to this library in react-native-math-view's README?

@ggunti

ggunti commented May 28, 2020

Copy link
Copy Markdown
Owner

By handling the excessive re-rendering you mean MathjaxFactory().preload()?:

MathjaxFactory().preload([
  ...basicMath,
  ...lowercase,
  ...uppercase,
  ...basicNaryOperators,
  ...commonMath.slice(0, 20)
]);

I tried it, but it blocks the UI for few seconds. Although, in the app I want to use the keyboard, I have a splash screen, so if MathjaxFactory().preload() would accept a callback function, I could show the splash screen until the success callback is invoked.

It's okay, you can add a link to this repo in react-native-math-view README.

@ShaMan123

Copy link
Copy Markdown
Author

I didn't mean preload, it is experimental. I did experience blocking. It's sync so you don't need a callback, you can terminate the splash screen right after preload executes.
I mean that every time a keyboard shows it renders everything from scratch, instead of using tabs

@ggunti

ggunti commented May 28, 2020

Copy link
Copy Markdown
Owner

Oh, I understand, thanks for clarifying.
No, I did not try to use tabs, I'm not sure how could I make it, although it's a great idea. I will give it a try.

@ShaMan123

ShaMan123 commented May 29, 2020

Copy link
Copy Markdown
Author

It's possible, simply render a tab view comprised of Flatlists, each being a keyboard. Then register the tab view as a single keyboard.
Because the math is static content you can build an asset file, it might be faster to render, see this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants