4 ms·
A lot of people don't understand that React's default behavior is to re-render _everything_. When a component is rendered, React will recursively re-render all
by acemarke 7y ago
A lot of people don't understand that React's default behavior is to re-render _everything_.
When a component is rendered, React will recursively re-render all descendants of that component. Out of the box, React doesn't do any optimizations like "skip rendering this component if the props haven't changed". Because of that, "re-creating callbacks" isn't an issue in base behavior [0], because there's nothing that cares if it's a new function reference or not.
It's only when child components are attempting to optimize perf by comparing props and avoiding re-renders that having consistent callback function references matters (ie, `React.memo()`, `PureComponent`, and React-Redux's `connect()`).
[0] https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-becau...
- csande17 7y agoYeah, React seems to have been designed under the assumption that DOM operations are the only thing front-end code can do that takes non-zero time. Like, here's the first line of their document describing how to use to improve performance using things like PureComponent: (https://reactjs.org/docs/optimizing-performance.html https://reactjs.org/docs/optimizing-performance.html) > Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. My experience with React applications (both writing them and as an end-user) hasn't really borne this out.
- ng12 7y agoCould you elaborate? Rendering perf is pretty much the least of my concerns, even on my apps which support IE10. Most "perf" problems I find are related to fetching and appropriately caching data.
- RussianCow 7y agoIt's pretty easy to run into render performance issues with React, especially on older machines, when you have a very dynamic UI. At work, we dynamically generate several SVG charts and "badges" on certain pages. Putting even one of those onto a page without any optimization created about a half second delay between actions on my high-end machine, so we had to spend some time making sure that things weren't re-rendering needlessly and that DOM nodes were getting reused. But even if that seems like an atypical use case, we had similar issues rendering complex tables, purely due to the amount of DOM nodes needing to be put onto the page at once. So it might not be an everyday kind of problem, but I don't think it's uncommon to run into performance issues with React.
- stickfigure 7y agoNot the parent, but here's one that I hit recently: I hoisted the state of an input box up a few layers because other parts of my app are affected by the current typed content. Since I'd been careless passing closures in as props to expensive components, they were getting re-rendered on every keystroke. It was noticeably sluggish.
- acemarke 7y agoJust out of curiosity, is that in production mode, or just in development?
- stickfigure 7y agoIt affected production enough to get some user complaints.
- acdha 7y agoThis was also a huge part of the marketing push for years: if you listened to proponents, you have thought that the average app was bottlenecked on DOM updates, and that partial updates were too hard to do with anything else.
- YuukiRey 7y ago> re-renders that having consistent callback function references matters That's the case I was talking about, I probably should have added that. In our codebase at work most components are using such optimizations but of course that's not the case for most people.