diff --git a/src/data/question-groups/react/content/investigate-slow-app.md b/src/data/question-groups/react/content/investigate-slow-app.md new file mode 100644 index 000000000..6493a2c2e --- /dev/null +++ b/src/data/question-groups/react/content/investigate-slow-app.md @@ -0,0 +1,33 @@ +There are many reasons why an app might be slow. It could be due to a slow network, a slow backend, or a slow client. It could also be due to a memory leak, unnecessary re-renders, or large bundle sizes. + +Here are some tips to help you investigate and fix performance issues: + +## Use the React DevTools Profiler + +The React DevTools Profiler helps you visualize how components render and identify costly renderings. It can also help you identify unnecessary re-renders. + +## Check for Unnecessary Renders + +Ensure that components don't render more often than needed. Be clear about the `useEffect` dependencies and avoid creating new objects or arrays every render, as these can trigger unnecessary child component renders. Tools like [why-did-you-render](https://npm.im/@welldone-software/why-did-you-render) can help spot unnecessary re-renders. + +## Analyze Bundle Size + +Use your production build to analyze your bundle size. Tools like [webpack-bundle-analyzer](https://npm.im/webpack-bundle-analyzer) or [source-map-explorer](https://npm.im/source-map-explorer) can help you see if large libraries or unused code is slowing down the initial load. + +## Optimize Images & Assets + +Ensure images are appropriately sized and use modern formats. Also, consider using CDNs for assets that don't change often. + +## Lazy Load Components + +Use `lazy()` and dynamic imports to split your bundle and load components only when they're needed. This can help reduce the initial load time. + +## Check Network Requests + +Slow API calls or fetching large amounts of data can affect performance. Optimize your backend, paginate data, or cache results. You can also use tools like [@tanstack/react-query](https://npm.im/@tanstack/react-query) or [swr](https://npm.im/swr) to help manage data fetching and caching. + +## Use Production Build for Testing + +Ensure you're testing the performance on a production build, as development builds are often slower due to extra checks and logs. + +Regularly profiling and monitoring your app can help you spot and fix performance issues before they become significant problems. You can use tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse) or [Calibre](https://calibreapp.com) to monitor your app's performance over time. diff --git a/src/data/question-groups/react/react.md b/src/data/question-groups/react/react.md index 602832a36..2cc1812bc 100644 --- a/src/data/question-groups/react/react.md +++ b/src/data/question-groups/react/react.md @@ -300,4 +300,9 @@ questions: topics: - 'Debugging' - 'Intermediate' + - question: How do you investigate a slow React app and identify performance bottlenecks? + answer: investigate-slow-app.md + topics: + - 'Performance' + - 'Intermediate' ---