The background does take up some CPU, have you tried if it's still slow when you change it to a static picture? Side note: it's absolutely insane that you can change the background! Amazing work, such detail.
A different framework would not make a difference per se, maybe less re-rendering could help a bit, you can easily do that in React. And btw I'm not hating on the other frameworks mentioned; absolutely legit choices, but React is as well.
There are many very performant and user friendly apps written in React, and you can easily write shitty apps in all frameworks (React included).
I'm very impressed by this app, so much functionality and details, honestly insane.
Thanks for noticing the detail, I spent quite a bit of time trying to get as much details and features as I could. Now for this year I want to make it more robust and take all the feedback I've got to make it even better.
Really amazing work, I can only imagine the time and effort this took!
- the app usually takes several dozens of seconds to load
- the phone becomes warm
- any text I typed is not restored after a crash or a page reload if the developers have not explicitly saved my keystrokes in the local storage.
- each key press in an input takes a good fraction of a second (if not one full second) to appear on the screen
For the last one, I feel the lag on a decent laptop too (even if the lag is shorter). I know why: it is good practice to feed back any input into the state of the React component so everything is in sync. This triggers a re-render and if the devs were not careful, a good chunk of the app is re-rendered, which does not necessarily lead to a browser re-render / a blink, but definitely makes React execute a lot of render methods and re-diff virtual DOM trees. So each key press makes the browser run some JS that makes useless computation and accesses to the DOM. It's called "controlled component" [1]. Well, this is good practice for the devs, but it is user hostile. I wish more things were designed user-first instead of dev-first.
React + React-dom alone is around 130 KiB, 42 KiB Gziped [2]. It's without counting the usual dependencies (classname, Redux, browserlist, polyfills…). It's also more than three times the size of the entire frontend of the SMS app I'm building with Svelte. The heaviness is insane.
It is probably possible-ish to build an almost lean app with React. Signal seems to be kind of an exception and feels quite fast on my laptop (can't tell on the phone). It leaks memory and gets OOM killed quite often but React might not be to blame here. But React apps usually come with a awful lot of dependencies, to add insult to the injury.
It's render and diff'ing lags, fan takeoffs and RAM exhaustion all the way down.
[1] https://reactjs.org/docs/forms.html#controlled-components
[2] taken there, as linked in the tutorial (https://reactjs.org/docs/add-react-to-a-website.html): https://unpkg.com/react-dom@17/umd/react-dom.production.min.... and https://unpkg.com/react@17/umd/react.production.min.js
I used to this. A better approach is to use the onBlur event of the input field to update the text to state. The text itself can be accessed via a reference to the input field in the onBlur event (created with useRef). This makes it so that not every typing action rerenders the whole component.
Edit: I wonder if its some kind of functionality causing the slow down? Perhaps Safari doing something stupid? Have you tried Chrome or another browser?