diff --git a/public/app/features/scenes/core/SceneObjectBase.tsx b/public/app/features/scenes/core/SceneObjectBase.tsx index 159338d9f1e..ad7c36d1d01 100644 --- a/public/app/features/scenes/core/SceneObjectBase.tsx +++ b/public/app/features/scenes/core/SceneObjectBase.tsx @@ -1,8 +1,9 @@ -import { useObservable } from 'react-use'; +import { useEffect } from 'react'; import { Observer, Subject, Subscription } from 'rxjs'; import { v4 as uuidv4 } from 'uuid'; import { EventBusSrv } from '@grafana/data'; +import { useForceUpdate } from '@grafana/ui'; import { SceneComponentWrapper } from './SceneComponentWrapper'; import { SceneObjectStateChangedEvent } from './events'; @@ -118,7 +119,7 @@ export abstract class SceneObjectBase impl useState() { // eslint-disable-next-line react-hooks/rules-of-hooks - return useObservable(this.subject, this.state); + return useSceneObjectState(this); } /** @@ -197,3 +198,18 @@ export abstract class SceneObjectBase impl return new (this.constructor as any)(clonedState); } } + +/** + * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject + * The reason for this is so that if the model instance change this function will always return the latest state. + */ +function useSceneObjectState(model: SceneObjectBase): TState { + const forceUpdate = useForceUpdate(); + + useEffect(() => { + const s = model.subject.subscribe(forceUpdate); + return () => s.unsubscribe(); + }, [model, forceUpdate]); + + return model.state; +} diff --git a/public/app/features/scenes/scenes/demo.tsx b/public/app/features/scenes/scenes/demo.tsx index fd46030217d..21066bf7007 100644 --- a/public/app/features/scenes/scenes/demo.tsx +++ b/public/app/features/scenes/scenes/demo.tsx @@ -78,7 +78,7 @@ export function getScenePanelRepeaterTest(): Scene { uid: 'gdev-testdata', type: 'testdata', }, - seriesCount: 5, + seriesCount: 2, alias: '__server_names', scenarioId: 'random_walk', }, @@ -119,7 +119,7 @@ export function getScenePanelRepeaterTest(): Scene { $data: queryRunner, actions: [ new SceneToolbarInput({ - value: '5', + value: '2', onChange: (newValue) => { queryRunner.setState({ queries: [