Skip to content

feat!: prevent FlatList item re-rendering - #1080

Open
gmsgowtham wants to merge 2 commits into
mainfrom
fix/451-prevent-flatlist-rerender
Open

feat!: prevent FlatList item re-rendering#1080
gmsgowtham wants to merge 2 commits into
mainfrom
fix/451-prevent-flatlist-rerender

Conversation

@gmsgowtham

@gmsgowtham gmsgowtham commented Sep 3, 2026

Copy link
Copy Markdown
Owner

Fixes #451

Root cause

Markdown used data=ReactNode[] + index keys (src/lib/Markdown.tsx:30) causing every value change to recreate all identities and FlatList to re-render all rows. Unstable styles/renderer and global slugger counter amplified.

Changes

  • MarkdownBlock (src/lib/types.ts:17, src/hooks/useMarkdownBlocks.ts:10) content-hash ids, stable blocks, space-filtered lexer
  • MarkdownBlock memo (src/lib/MarkdownBlock.tsx:24) raw/type comparator, only changed blocks re-parse
  • FlatList refactor (src/lib/Markdown.tsx:31,44,51) keyExtractor=item.id, ScrollView fallback when flatListProps=null
  • useMarkdown cache (src/hooks/useMarkdown.ts:84,125) prefix & per-index reuse
  • Renderer
    resetKeys() (src/lib/Renderer.tsx:13), useMarkdownWithComponents stable ids (src/hooks/useMarkdownWithComponents.tsx:39)
  • Docs/exports (README.md:48,60, src/index.ts:12)
  • Snapshots updated (64), new regression tests src/lib/tests/FlatListRerender.spec.tsx:6

Verification

  • yarn typescript pass
  • yarn lint pass (8 infos only)
  • yarn test --collectCoverage --silent 156/156 pass
  • yarn build 24 files
  • yarn reassure --silent ~7.5ms no redundant updates

BREAKING CHANGE: flatListProps generic is FlatListProps|null; snapshots change; callers should memoize styles/theme/renderer.

@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown

Performance Comparison Report

  • Current: HEAD (29fa234) - 2026-09-07 05:59:27Z
  • Baseline: main (2bfea9e) - 2026-09-07 05:58:59Z

Significant Changes To Duration

Show entries
Name Type Duration Count
Perf test Renders markdown render 6.9 ms → 5.7 ms (-1.3 ms, -18.2%) 🟢 1 → 1
Show details
Name Type Duration Count
Perf test Renders markdown render Baseline
Mean: 6.9 ms
Stdev: 0.3 ms (4.5%)
Runs: 7.8 6.9 6.7 6.8 7.0 6.7 6.9 6.9 6.7 6.8
Warmup runs: 5927.4
Removed outliers: (none)
Stability: 4.5%

Current
Mean: 5.7 ms
Stdev: 0.3 ms (5.4%)
Runs: 6.4 5.5 5.6 5.6 5.5 5.5 5.6 5.9 5.3
Warmup runs: 175.5
Removed outliers: 7.9
Stability: 12.9%
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Meaningless Changes To Duration

There are no entries

Render Count Changes

There are no entries

Render Issues

There are no entries

Added Entries

There are no entries

Removed Entries

There are no entries

Stability

Name Baseline Current
Weighted Average 4.5% 12.9%

Generated by 🚫 dangerJS against a0138df

- Introduce MarkdownBlock (id+token+raw) with content-hash keys via useMarkdownBlocks (src/hooks/useMarkdownBlocks.ts:10, src/lib/types.ts:17) replacing index keys (src/lib/Markdown.tsx:44)
- Memoize block rows with React.memo and raw/type comparators (src/lib/MarkdownBlock.tsx:24) so only changed/new blocks re-parse
- Refactor Markdown to data=MarkdownBlock[] with stable FlatList keyExtractor and ScrollView fallback when flatListProps=null (src/lib/Markdown.tsx:31,51)
- Optimize useMarkdown with token-level reuse for append and per-index edits (src/hooks/useMarkdown.ts:84,125)
- Stabilize ReactComponentTokenizer keys and add Renderer.resetKeys (src/hooks/useMarkdownWithComponents.tsx:39, src/lib/Renderer.tsx:13)
- Update docs, exports and snapshots; fixes #451

BREAKING CHANGE: Markdown flatListProps generic is now FlatListProps<MarkdownBlock> | null; snapshots change; callers should memoize styles/theme/renderer objects to benefit from bail-out
@gmsgowtham
gmsgowtham force-pushed the fix/451-prevent-flatlist-rerender branch from 71297c6 to 825fee6 Compare September 6, 2026 10:14
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.

Prevent flatlist item re-rendering

1 participant