Crash rendering list

[rcgoodfellow]

Hit this

react-dom.development.js:27292 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:27292:11)
    at scheduleUpdateOnFiber (react-dom.development.js:25475:3)
    at dispatchSetState (react-dom.development.js:17527:7)
    at fitTextToContainer (Util.tsx:68:11)
    at Util.tsx:75:5
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23268:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:9)
    at commitLayoutEffects_begin (react-dom.development.js:24674:7)
    at commitLayoutEffects (react-dom.development.js:24612:3)
checkForNestedUpdates @ react-dom.development.js:27292
scheduleUpdateOnFiber @ react-dom.development.js:25475
dispatchSetState @ react-dom.development.js:17527
fitTextToContainer @ Util.tsx:68
(anonymous) @ Util.tsx:75
commitHookEffectListMount @ react-dom.development.js:23150
commitLayoutEffectOnFiber @ react-dom.development.js:23268
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 21 more frames
react-dom.development.js:18687 The above error occurred in the <FitText> component:

    at FitText (http://localhost:1337/node_modules/@oxide/fable/src/templates/Util.tsx:40:27)
    at div
    at div
    at Template (http://localhost:1337/node_modules/@oxide/fable/src/templates/Basic.tsx?import:8:28)
    at div
    at div
    at main
    at Page (http://localhost:1337/node_modules/@oxide/fable/src/Page.tsx:3:17)
    at div
    at App (http://localhost:1337/node_modules/@oxide/fable/src/App.tsx:11:27)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 19 more frames
react-dom.development.js:27292 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:27292:11)
    at scheduleUpdateOnFiber (react-dom.development.js:25475:3)
    at dispatchSetState (react-dom.development.js:17527:7)
    at fitTextToContainer (Util.tsx:68:11)
    at Util.tsx:75:5
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23268:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:9)
    at commitLayoutEffects_begin (react-dom.development.js:24674:7)
    at commitLayoutEffects (react-dom.development.js:24612:3)

From this

[[pages]]
template = "Basic"
title = "Why is network programmability important?"
text = """
-  
    - **Flexibility**
        - Example: Cooperative distributed NAT.
    - **Fit-for-purpose** resource usage.
        - Using precious TCAM for exactly what our requirements call for.
    - **Comprehensibility**
        - Our customer operators have a *responsibility* to their organizations
        to keep mission-critical networks running.
        - Giving them data plane code access gives them the *autonomy*
        comprehend network behaviors and solve problems independently.
"""

[rcgoodfellow]

I worked around this for the moment by making the following coefficient slightly more aggressive to 0.7. Thereby reducing the recursion depth.

• https://github.com/oxidecomputer/fable/blob/24d2a6667b3ab8ca908a4b2b8ba810e5ec2ca2de/src/templates/Util.tsx#L68

[benjaminleonard]

Removed fitText from those templates for now, most let you tweak text size with text_font_size. I did try a binary search approach but it requires more thinking to wait until images are loaded. Might be best trying to do it outside of react renders.