Maximum update depth exceeded when trying to use React hooks

[P-Sanjana]

🐛 Problem Description

I'm using unicornstudio-react (^1.4.33) in my Next.js (15.5.4) application. When I try to use useState hook to keep track of scene load, I get React's maximum update depth exceeded error.

📋 Evidence

UnicornSceneComponent.tsx:

'use client';
import { useState } from 'react';
import UnicornScene from 'unicornstudio-react/next';

export default function UnicornSceneComponent() {

const [sceneLoaded, setSceneLoaded] = useState(false);

  return (
    <div style={{ height: '90vh' }}>
      <UnicornScene
        projectId={process.env.UNICORN_STUDIO_PROJECT_ID}
        placeholderClassName='bg-gradient-to-r from-blue-500 to-purple-600 animate-pulse'
        placeholder={<div className="flex items-center justify-center h-full bg-gradient-to-r from-blue-500 to-purple-600 animate-pulse">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto"></div>
            <p className="mt-4 text-gray-200">Loading 3D Scene...</p>
          </div>
        </div>}
        onLoad={() => setSceneLoaded(true)}
      />
      
    </div>
  );
}

Error:

🎯 Expected Behavior

• The UnicornSceneComponent has to render without any issues.
• After loading the scene, the state variable sceneLoaded should set to true.

📈 Impact Assessment

• Severity: 🔴 High - Leads to infinite render loops

P.S: It works completely fine without useState.

[GeorgeHastings]

Hmm, @diegopeixoto ?

[schellenbergk]

@P-Sanjana

The error "Maximum update depth exceeded" is likely caused by the onLoad callback triggering a state update that causes a re-render, which triggers onLoad again, creating an infinite loop.

Try this:

'use client';
import { useState, useCallback } from 'react';
import UnicornScene from 'unicornstudio-react/next';

export default function UnicornSceneComponent() {
  const [sceneLoaded, setSceneLoaded] = useState(false);

  // Memoize the callback to prevent infinite re-renders
  const handleLoad = useCallback(() => {
    setSceneLoaded(true);
  }, []); // Empty dependency array - only create once

  return (
    <div style={{ height: '90vh' }}>
      <UnicornScene
        projectId={process.env.UNICORN_STUDIO_PROJECT_ID}
        placeholderClassName='bg-gradient-to-r from-blue-500 to-purple-600 animate-pulse'
        placeholder={
          <div className="flex items-center justify-center h-full bg-gradient-to-r from-blue-500 to-purple-600 animate-pulse">
            <div className="text-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto"></div>
              <p className="mt-4 text-gray-200">Loading 3D Scene...</p>
            </div>
          </div>
        }
        onLoad={handleLoad}
      />
    </div>
  );
}

[P-Sanjana]

@schellenbergk, thanks for your suggestion. I’ve already tried that approach, but the issue still persists. Even after removing the state management and just using use client directive, I’m still encountering the same error.

[schellenbergk]

Bro, you need to prefix your env with NEXT_PUBLIC_... nextjs basics. @P-Sanjana