[Due for payment 2025-09-19] DEV : After entering an amount into any input form using NumberWithSymbolForm a following console error arises -> Cannot update a component (`Form`) while rendering a different component (`NumberWithSymbolForm`).

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: N
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @jakubkalinski0
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open the app.
2. Go to any already existing workspace or create a new one.
3. Go to 'More features' and turn on 'Distance rate' feature.
4. Open the CreateDistanceRate page.
5. Input some amount.
6. Error shows up in the console.

Expected Result:

No error in console

Actual Result:

Cannot update a component (Form) while rendering a different component (NumberWithSymbolForm). error displayed

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-08-29.at.15.39.58.mov

Screen.Recording.2025-08-29.at.15.46.31.mov

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Cannot update a component (Form) while rendering a different component (NumberWithSymbolForm). error displayed

What is the root cause of that problem?

The error "Cannot update a component (Form) while rendering a different component (NumberWithSymbolForm)" is a React state update violation. This happens when you try to update state during the render phase of a component.

The problem is in the setNewNumber function where onInputChange?.(strippedNumber) is called directly within the setCurrentNumber callback. This is causing a state update during the render phase.

App/src/components/NumberWithSymbolForm.tsx

Line 197 in 871247e

onInputChange?.(strippedNumber);

App/src/components/NumberWithSymbolForm.tsx

Line 224 in 871247e

onInputChange?.(strippedNumber);

What changes do you think we should make in order to solve the problem?

We should use a new state pendingInputChange and useEffect to call onInputChange after the state has been updated

    const [pendingInputChange, setPendingInputChange] = useState<string | null>(null);
    ...
    const setNewNumber = useCallback(
        (newNumber: string) => {
                ...
                setPendingInputChange(strippedNumber);
                return strippedNumber;
            });
        },
        [decimals, maxLength],
    ); 
   ...
    const setFormattedNumber = (text: string) => {
        ...
        setPendingInputChange(strippedNumber);
    };
   ...
    // Handle pending input changes after state updates
    useEffect(() => {
        if (pendingInputChange === null) {
            return;
        }
        onInputChange?.(pendingInputChange);
        setPendingInputChange(null);
    }, [pendingInputChange, onInputChange]);

Note: we also have the error in other components like AmountWithoutCurrencyInput and PercentageForm so we should fix this in this issue

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• When using NumberWithSymbolForm within a FormProvider (such as in CreateDistanceRatePage), React throws a warning: "Cannot update a component (Form) while rendering a different component (NumberWithSymbolForm)". This occurs when the user types in the input field, causing the form state to update during the render cycle.

What is the root cause of that problem?

• The issue stems from synchronous state updates during render. In NumberWithSymbolForm, when setNewNumber or setFormattedNumber is called (triggered by user input), it immediately calls onInputChange which propagates to FormProvider. This causes FormProvider to call setInputValues while NumberWithSymbolForm is still rendering, violating React's rule against updating parent components during child component rendering.

The problematic flow is:

1. User types in NumberWithSymbolForm
2. setNewNumber/setFormattedNumber executes
3. onInputChange is called synchronously
4. FormProvider.onInputChange calls setInputValues
   

   App/src/components/NumberWithSymbolForm.tsx

   Line 197 in 6f46feb

   onInputChange?.(strippedNumber);

   
   

   App/src/components/NumberWithSymbolForm.tsx

   Line 224 in 6f46feb

   onInputChange?.(strippedNumber);

   
   

   App/src/components/Form/FormProvider.tsx

   Lines 425 to 443 in 6f46feb

   	onInputChange: (value, key) => {
   	const inputKey = key ?? inputID;
   	setInputValues((prevState) => {
   	const newState = {
   	...prevState,
   	[inputKey]: value,
   	};
   	if (shouldValidateOnChange) {
   	onValidate(newState);
   	}
   	return newState as Form;
   	});
   	if (inputProps.shouldSaveDraft && !formID.includes('Draft')) {
   	setDraftValues(formID, {[inputKey]: value});
   	}
   	inputProps.onValueChange?.(value, inputKey);
   	},

What changes do you think we should make in order to solve the problem?

• Defer the form state update in FormProvider using requestAnimationFrame to ensure it happens after the current render cycle completes.

onInputChange: (value, key) => {
    const inputKey = key ?? inputID;
    
    // Defer the update to avoid render-time state changes
    requestAnimationFrame(() => {
        setInputValues((prevState) => {
            const newState = {
                ...prevState,
                [inputKey]: value,
            };

            if (shouldValidateOnChange) {
                onValidate(newState);
            }
            return newState as Form;
        });

        if (inputProps.shouldSaveDraft && !formID.includes('Draft')) {
            setDraftValues(formID, {[inputKey]: value});
        }
        inputProps.onValueChange?.(value, inputKey);
    });
},

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did we explore? (Optional)

1. useDeferredValue: Defer form value updates
2. Use a debounced approach to batch multiple rapid updates:

// In FormProvider
const debouncedUpdate = useRef<NodeJS.Timeout>();

onInputChange: (value, key) => {
    const inputKey = key ?? inputID;
    
    if (debouncedUpdate.current) {
        clearTimeout(debouncedUpdate.current);
    }
    
    debouncedUpdate.current = setTimeout(() => {
        setInputValues((prevState) => {
            // ... existing logic
        });
        // ... rest of logic
    }, 0);
},

3. Create a custom event emitter that defers updates:

// In NumberWithSymbolForm
const emitChange = useCallback((value: string) => {
    // Use a microtask to defer the update
    Promise.resolve().then(() => {
        onInputChange?.(value);
    });
}, [onInputChange]);

// Replace onInputChange calls with emitChange

Result

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ZhenjaHorbach (External)

[jliexpensify]

Don't have a DEV account so asisgning out to C+ to review