BigNumber React component causes unresponsiveness in Next.js with Strict Mode

[krystonen]

When using the BigNumber.tsx component from canvas-embed in a Next.js application with Strict Mode enabled, the page becomes unresponsive. This indicates underlying issues with the component's implementation, particularly in its animation logic. Package version: 1.0.98

Steps to reproduce:

1. Use BigNumber.tsx in a Next.js application
2. Enable Strict Mode
3. Render the component
4. Observe page unresponsiveness

Potential issues and suggestions:

1. Animation frame handling:

The current implementation of animateTicks uses useState inside the requestAnimationFrame callback. This can lead to unnecessary re-renders and potential performance issues 24.
Suggestion: Consider refactoring animateTicks to avoid using state updates within the animation frame callback.

2. Memoization:

Adding useMemo for currentNumberToDisplay and wrapping animateTicks in a useCallback seems to alleviate the rendering issues.
Suggestion: Implement these optimizations in the component to improve performance.

3. State management:

The elapsed state might be unnecessary or could be managed outside the requestAnimationFrame function.

Suggestion: Evaluate if elapsed state is needed. If it is, consider managing it outside the animation frame callback to reduce potential re-render cycles24.

4. Strict Mode compatibility:

Ensure the component is compatible with React's Strict Mode, which can cause double rendering for development purposes13.

Suggestion: Review the component's lifecycle and side effects to ensure they handle potential double invocations gracefully.

These changes should help improve the component's performance and compatibility with Strict Mode in Next.js applications. Let me know if you need any clarification or have additional information that could help in resolving this issue.