React Performance Optimization: Lazy Loading

It works normally with no issues
React throws a warning but it still works
It causes the component to re-render on every update
It creates a new lazy component on every render, potentially causing issues
If you use React.lazy() inside a component function instead of at the module level, it creates a new lazy component on every render. This defeats the purpose of code splitting and can cause significant performance issues, unexpected loading behavior, and memory problems. Each render would trigger a new dynamic import and create a new component type, which breaks React's reconciliation process. Always define lazy components at the module level (outside of any component function) to ensure they're created only once and maintain consistent identity across renders.