Optimizing React Applications for Mobile Performance

{
  "title": "Optimizing React Applications for Mobile Performance",
  "description": "Best practices for enhancing the performance of React applications on mobile devices.",
  "category": "React Cursor Rules",
  "rules": [
    {
      "id": "react-avoid-inline-functions",
      "description": "Avoid defining functions inline within the render method to prevent unnecessary re-renders.",
      "severity": "warning",
      "pattern": "function render() { return <Component onClick={() => doSomething()} />; }",
      "replacement": "function handleClick() { doSomething(); } function render() { return <Component onClick={handleClick} />; }",
      "references": [
        "https://dev.to/dipakahirav/top-10-react-performance-optimization-techniques-ikp"
      ]
    },
    {
      "id": "react-use-memoization",
      "description": "Use React.memo and useCallback to memoize components and functions, reducing unnecessary re-renders.",
      "severity": "warning",
      "pattern": "const MyComponent = (props) => { /* component code */ };",
      "replacement": "const MyComponent = React.memo((props) => { /* component code */ });",
      "references": [
        "https://dev.to/dipakahirav/top-10-react-performance-optimization-techniques-ikp"
      ]
    },
    {
      "id": "react-lazy-loading",
      "description": "Implement lazy loading for components using React.lazy and Suspense to reduce initial load time.",
      "severity": "warning",
      "pattern": "import MyComponent from './MyComponent';",
      "replacement": "const MyComponent = React.lazy(() => import('./MyComponent'));",
      "references": [
        "https://blog.logrocket.com/7-optimization-techniques-in-react/"
      ]
    },
    {
      "id": "react-avoid-large-images",
      "description": "Optimize images by compressing them and using appropriate formats to improve load times on mobile devices.",
      "severity": "warning",
      "pattern": "<img src='large-image.jpg' />",
      "replacement": "<img src='optimized-image.webp' loading='lazy' />",
      "references": [
        "https://cloudinary.com/guides/front-end-development/react-optimization"
      ]
    },
    {
      "id": "react-virtualize-long-lists",
      "description": "Use virtualization techniques for rendering long lists to improve performance on mobile devices.",
      "severity": "warning",
      "pattern": "const listItems = items.map(item => <Item key={item.id} data={item} />);",
      "replacement": "import { FixedSizeList as List } from 'react-window'; const listItems = <List height={500} itemCount={items.length} itemSize={35} width={300}>{({ index, style }) => <Item key={items[index].id} data={items[index]} style={style} />}</List>;",
      "references": [
        "https://dev.to/dipakahirav/top-10-react-performance-optimization-techniques-ikp"
      ]
    },
    {
      "id": "react-avoid-direct-state-mutation",
      "description": "Avoid mutating state directly to prevent performance issues and unintended side effects.",
      "severity": "error",
      "pattern": "this.state.count = this.state.count + 1;",
      "replacement": "this.setState({ count: this.state.count + 1 });",
      "references": [
        "https://cloudinary.com/guides/front-end-development/react-optimization"
      ]
    },
    {
      "id": "react-use-production-build",
      "description": "Ensure the production build of React is used for deployment to benefit from optimizations and minifications.",
      "severity": "warning",
      "pattern": "react.development.js",
      "replacement": "react.production.min.js",
      "references": [
        "https://dev.to/dipakahirav/top-10-react-performance-optimization-techniques-ikp"
      ]
    },
    {
      "id": "react-implement-throttling-debouncing",
      "description": "Implement throttling and debouncing for event handlers to prevent excessive rendering.",
      "severity": "warning",
      "pattern": "window.addEventListener('resize', handleResize);",
      "replacement": "import _ from 'lodash'; const handleResize = _.debounce(() => { /* handle resize */ }, 200); window.addEventListener('resize', handleResize);",
      "references": [
        "https://dev.to/dipakahirav/top-10-react-performance-optimization-techniques-ikp"
      ]
    },
    {
      "id": "react-use-immutable-data-structures",
      "description": "Use immutable data structures to ensure efficient change detection and rendering.",
      "severity": "warning",
      "pattern": "this.state.items.push(newItem);",
      "replacement": "this.setState({ items: [...this.state.items, newItem] });",
      "references": [
        "https://www.cvinfotech.com/10-best-practices-for-optimizing-reactjs-performance/"
      ]
    },
    {
      "id": "react-optimize-network-requests",
      "description": "Optimize network requests by implementing caching and efficient data-fetching strategies.",
      "severity": "warning",
      "pattern": "fetch('https://api.example.com/data')",
      "replacement": "const cachedData = localStorage.getItem('data'); if (cachedData) { /* use cached data */ } else { fetch('https://api.example.com/data').then(response => response.json()).then(data => { localStorage.setItem('data', JSON.stringify(data)); /* use data */ }); }",
      "references": [
        "https://codiant.com/blog/expert-tips-for-performance-optimization-in-react/"
      ]
    }
  ]
}