React Performans Optimizasyonu: Gelişmiş Teknikler
Samet Koca
React Performance Optimization
Performance is crucial for modern web applications. This guide covers advanced techniques to optimize React applications for better user experience and faster load times.
1. Component Optimization
Optimizing React components is the foundation of performance improvement:
React.memo for Functional Components
const ExpensiveComponent = React.memo(({ data }) => {
return (
{data.map(item => (
{item.name}
))}
);
});useMemo for Expensive Calculations
const ExpensiveCalculation = ({ items }) => {
const processedData = useMemo(() => {
return items.filter(item => item.active)
.map(item => ({ ...item, processed: true }));
}, [items]);
return {/* Render processed data */};
};useCallback for Function Stability
const ParentComponent = () => {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(prev => prev + 1);
}, []);
return (
2. Code Splitting
Code splitting allows you to load only the code needed for the current page:
Route-Based Code Splitting
import { lazy, Suspense } from 'react';
const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
function App() {
return (
Loading... Component-Based Code Splitting
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function MyComponent() {
const [showHeavy, setShowHeavy] = useState(false);
return (
{showHeavy && (
Loading component... }>
3. Virtual Scrolling
For large lists, virtual scrolling can dramatically improve performance:
import { FixedSizeList as List } from 'react-window';
const VirtualizedList = ({ items }) => {
const Row = ({ index, style }) => (
{items[index].name}
);
return (
{Row}
);
};4. Bundle Optimization
Optimizing your bundle size is crucial for faster load times:
Tree Shaking
- Use ES6 modules for better tree shaking
- Import only what you need from libraries
- Configure webpack for optimal tree shaking
Library Optimization
- Use smaller alternatives (date-fns instead of moment.js)
- Implement dynamic imports for heavy libraries
- Use CDNs for common libraries when appropriate
5. State Management Optimization
Efficient state management is key to performance:
Context Optimization
const OptimizedContext = createContext();
const OptimizedProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
const value = useMemo(() => ({
state,
dispatch
}), [state]);
return (
{children}
);
};Redux Optimization
- Use reselect for memoized selectors
- Implement proper action creators
- Use Redux Toolkit for better performance
6. Rendering Optimization
Optimizing the rendering process can significantly improve performance:
Key Optimization
const ListItem = React.memo(({ item, onItemClick }) => {
return (
onItemClick(item.id)}>
{item.name}
);
});Fragment Usage
// Instead of wrapper divs
const Component = () => (
<>
7. Memory Management
Proper memory management prevents memory leaks:
Cleanup in useEffect
useEffect(() => {
const subscription = someService.subscribe();
return () => {
subscription.unsubscribe();
};
}, []);Event Listener Cleanup
useEffect(() => {
const handleResize = () => {
// Handle resize
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);8. Performance Monitoring
Monitoring performance helps identify bottlenecks:
React DevTools Profiler
- Use React DevTools Profiler to identify slow components
- Monitor render times and component updates
- Identify unnecessary re-renders
Performance Metrics
- Monitor Core Web Vitals
- Track bundle size and load times
- Measure user interaction responsiveness
Conclusion
React performance optimization is an ongoing process. Start with the basics like memoization and code splitting, then move to more advanced techniques like virtual scrolling and bundle optimization.
Remember to measure performance before and after optimizations to ensure your changes are actually improving the user experience.
