Skip to content

fix: refactor component tree to reduce re-render propagation#471

Open
binayyub4211 wants to merge 10 commits into
rinafcode:mainfrom
binayyub4211:main
Open

fix: refactor component tree to reduce re-render propagation#471
binayyub4211 wants to merge 10 commits into
rinafcode:mainfrom
binayyub4211:main

Conversation

@binayyub4211
Copy link
Copy Markdown
Contributor

Closes #269

What was done

  1. Component Tree Flattening:
    • Converted the local <ScreenTracker /> JSX component within app/_layout.tsx into a custom hook useScreenTracker().
    • Extracted and structured the Stack navigator within RootLayoutContent to decrease nesting levels down to an optimized depth of 4 layers under the root.
  2. Re-render Isolation:
    • Refactored OfflineIndicatorProvider.tsx to extract stateful toast and network status tracking states into a lightweight, standalone sibling component called OfflineUI, wrapped in React.memo.
    • The main parent OfflineIndicatorProvider was made completely stateless, shielding the entire main navigation stack and child components within {children} from network or toast state changes.
  3. Context Memoization:
    • Wrapped the provider context values inside AnalyticsProvider.tsx and useAuth.tsx inside React.useMemo to keep references stable and prevent cascading updates to consumers.
  4. Environment Stability:
    • Added a fallback mock for Animated.spring and clean Proxy-based mocks for lucide-react-native inside jest.setup.js to ensure fake timers execute correctly without infinite loops.

Why it was done

Deep React component trees suffer from render cascades where high-frequency state updates (such as network connections or active alerts) trigger updates across the entire app. Isolating stateful UI branches into memoized siblings and stable contexts shields independent branches and keeps rendering focused.

How it was verified

  1. Programmatic Validation:
    • Implemented a dedicated test suite under tests/components/ComponentTreeOptimization.test.tsx verifying that mock state updates for network status transitions and toast additions cause 0 re-renders on the child component tree.
  2. Unit Tests:
    • Ran useDebounce.test.ts to confirm core input timer logic passes.
  3. Linter Compliance:
    • Executed ESLint checks directly on all modified files, confirming 0 warnings and 0 errors.

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 29, 2026

@binayyub4211 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@RUKAYAT-CODER
Copy link
Copy Markdown
Contributor

Kindly resolve conflict and fix workflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Refactor component tree to reduce re-render propagation

2 participants