benefriches-react-best-practices

Optimize React component re-renders by applying memoization patterns, using immutable Redux operations like replacing sort with toSorted, and structuring selectors properly. This prevents unnecessary UI updates and keeps the interface responsive during state changes.

Handle async data in React by implementing Suspense boundaries and using Promise.all patterns for parallelization. This approach keeps the UI responsive while waiting for data loads and integrates with conditional module loading workflows.

Yes, the optimization approach relies on standard Node and NPM tooling within a Vite environment. It applies standard React and Redux patterns without requiring external dependencies, fitting directly into the existing development workflow.

Use toSorted instead of sort to maintain immutability in Redux reducers. The sort method mutates the original array in place, which violates Redux state management principles, whereas toSorted returns a new sorted array safely.

Analyze a React component by passing it to this Skill to generate concrete optimization steps. It evaluates the component against best practices for memoization, bundle-size reduction, and code-splitting to provide actionable refactoring guidance.