Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

FunctionComponent.Of functions cache breaks reusable code

Open
#241 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
fsharp, react
Domain
frontend

Research direction

Start at the implementation of FunctionComponent.Of and inspect how its cacheKey is constructed from the calling source location. Reproduce the reusable-code case described in the issue, then verify that distinct functions no longer share a cache entry while the existing caching behavior remains intact.

Written by the indexing model from the issue text.

Description

This is how FunctionComponent.Of caches passed function:

// Cache the render function to prevent recreating the component every time when FunctionComponent.Of
// is called inside another function (including generic values: let MyCom<'T> = ...)
let cacheKey = __callingSourceFile.Value + "#L" + (string __callingSourceLine.Value)

I have a reusable piece of code that uses FunctionComponent.Of for different cases and they result in the same cacheKey. So it picks a wrong function at runtime for all cases but one.

At least the displayName should also be part of the cacheKey (I pass a custom value anyway) or accept optional custom cacheKey (although that would reveal its implementation).

None of the options is available which keeps me pinned to Fable.React 5.4.0 (last version before function caching was intorduced)

Dominant language
F#
Stars
277
Forks
65
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from fable-compiler/fable-react

All issues in fable-compiler/fable-react

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.