React State Management with Redux
Master React state management using Redux for complex application state handling.
## Modern React Development
### Custom Hooks for Reusability
```javascript
// Custom hook for API calls
function useApi(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
```
### Performance Optimization Techniques
- Use React.memo() for component memoization
- Implement useMemo() and useCallback() for expensive calculations
- Code splitting with React.lazy() and Suspense
- Optimize bundle size with tree shaking
### State Management Patterns
- Local state with useState for component-specific data
- Context API for sharing state across components
- Redux Toolkit for complex application state
- Server state management with React Query
### Testing Strategies
- Unit testing with Jest and React Testing Library
- Integration testing for component interactions
- End-to-end testing with Cypress or Playwright