ck:frontend-development

Implement cache-first data fetching in React by combining the `useSuspenseQuery` hook from TanStack Query with React's `<SuspenseLoader>` component. This pattern ensures efficient data retrieval while providing smooth loading states for lazy-loaded components.

Structure TypeScript types for React components using the `React.FC<Props>` pattern. This ensures strict type safety for your component inputs, which is essential for building maintainable and efficient UI components in modern React development.

Set up routing in a React application with TanStack Router by following its specific guidelines for route management. This integrates seamlessly with modern patterns like lazy loading and Suspense, ensuring efficient navigation and data fetching within your TypeScript frontend.

MUI v7 works seamlessly with React lazy loading and Suspense. You can style components using MUI v7 or inline styles while wrapping heavy, lazy-loaded components in a Suspense boundary, ensuring smooth loading states and optimized frontend performance.

Optimize React performance when passing event handlers to child components by wrapping them in the `useCallback` hook. This prevents unnecessary re-renders in modern web applications, maintaining high performance and code quality while building efficient React components.

Use lazy loading for heavy React components to optimize web application performance. By deferring the loading of heavy components until they are needed and wrapping them in `<SuspenseLoader>`, you reduce the initial bundle size and ensure smooth loading states.