4 ms·

React works great for simple examples and small applications. When you try to build something complex with good performance then the difficulty goes almost vert

React works great for simple examples and small applications. When you try to build something complex with good performance then the difficulty goes almost vertical. It’s trivially easy to miss or break a stable reference somewhere and tank performance or show stale data.

acover 4y ago
I converted a long list from Django templates into react. I struggled to convert the code to navigate to a hidden element. In JavaScript it's document.getElementById and set attribute. In react it's easy to cause part or the entire list to recalculate the virtual dom. I couldn't think of a good solution. Ideally I'd just call set state on the child element that needs updating but that would require registering all the relevant functions with the parent. Super ugly.
- solardev 4y ago
  Can you explain? Are you saying there is a long list, with some hidden elements that need updating (but not rendering)? If so... can the entire list be stored in state (and updated as necessary), but only the ones marked "is visible" actually get rendered? Maybe I'm misunderstanding completely...
  - acover 4y ago
    So in Django templates I'd just flip a style - display from hidden to block of a single div. This would reveal a collapsed section of the tree and I could scroll to the correct div id. (saying list was a bad simplification) In react because the state flowed from top to bottom I have to be very careful about what objects I update. Just passing down a single reveal could force the virtual dom to update for (num children per node)*depth. Even this required care on what props got updated. The solutions seemed to be: 1. lots of useMemo so only a minimal amount of a node got recalculated; 2. Directly call a set state function of another child. Both are quite ugly :( but the second seems nicer as it never could force a full update. However, it seemed to require a registry of set state functions {id: setState}.
amand33p 4y ago
>React works great for simple examples and small applications. I'd like to have some citation here. Most of the product startups use React for their frontend, and they seem to make it work really well. Never saw any issues.
- cageface 4y ago
  I'm citing my own experience working on several large high performance react apps. Yes you can make it work. No it's not easy at all.
littlecranky67 4y ago
What other FE Framework does a better job at scaling up in your opinion? I work as a freelance FE dev for 8 years and been doing webdev since the late 90s. I must say that for SPAs, React (with hooks) does the best job at scaling up (if you pay attention to your architecture) and I have seen and used frameworks/libs come-and-go such as knockoutJS, jquery, angular1, angular2+, (p)react etc.
- cageface 4y ago
  I haven't tried any of the other comparable frameworks at similar scale. Both Svelte and SolidJS seem much nicer than React to me on the smaller projects I've tried them on but I haven't used them on large enough projects to make a direct comparison.

acover 4y ago

I converted a long list from Django templates into react. I struggled to convert the code to navigate to a hidden element. In JavaScript it's document.getElementById and set attribute. In react it's easy to cause part or the entire list to recalculate the virtual dom. I couldn't think of a good solution. Ideally I'd just call set state on the child element that needs updating but that would require registering all the relevant functions with the parent. Super ugly.

solardev 4y ago
Can you explain? Are you saying there is a long list, with some hidden elements that need updating (but not rendering)? If so... can the entire list be stored in state (and updated as necessary), but only the ones marked "is visible" actually get rendered? Maybe I'm misunderstanding completely...
- acover 4y ago
  So in Django templates I'd just flip a style - display from hidden to block of a single div. This would reveal a collapsed section of the tree and I could scroll to the correct div id. (saying list was a bad simplification) In react because the state flowed from top to bottom I have to be very careful about what objects I update. Just passing down a single reveal could force the virtual dom to update for (num children per node)*depth. Even this required care on what props got updated. The solutions seemed to be: 1. lots of useMemo so only a minimal amount of a node got recalculated; 2. Directly call a set state function of another child. Both are quite ugly :( but the second seems nicer as it never could force a full update. However, it seemed to require a registry of set state functions {id: setState}.

amand33p 4y ago

>React works great for simple examples and small applications. I'd like to have some citation here. Most of the product startups use React for their frontend, and they seem to make it work really well. Never saw any issues.

cageface 4y ago
I'm citing my own experience working on several large high performance react apps. Yes you can make it work. No it's not easy at all.

littlecranky67 4y ago

What other FE Framework does a better job at scaling up in your opinion? I work as a freelance FE dev for 8 years and been doing webdev since the late 90s. I must say that for SPAs, React (with hooks) does the best job at scaling up (if you pay attention to your architecture) and I have seen and used frameworks/libs come-and-go such as knockoutJS, jquery, angular1, angular2+, (p)react etc.

cageface 4y ago
I haven't tried any of the other comparable frameworks at similar scale. Both Svelte and SolidJS seem much nicer than React to me on the smaller projects I've tried them on but I haven't used them on large enough projects to make a direct comparison.