Fast Refresh oddities

[alexstanbury]

"react-native": "0.70.2",
"@legendapp/state": "^0.19.0",
"react": "18.1.0",
"typescript": "^4.8.2"

I'm noticing observers being called an increasing number of times after fast refresh.

After a fresh reload I get the logs:

ComponentA hook observer undefined
ComponentA hook observer 1665157345629

if I save ComponentA.tsx without making any changes fast refresh triggers and I get an addditional single console.log:

ComponentA hook observer 1665157345629

If I then go and save ComponentB.tsx without making any changes fast refresh triggers and I get 2 console.logs with newer timestamps

ComponentA hook observer 1665157432979
ComponentA hook observer 1665157432979

If I then go back to save ComponentA.tsx again and save without making any changes I get an addditional single console.log:

ComponentA hook observer 1665157432979

Then if I go back and save ComponentB.tsx without making any changes, I get 3 console.logs with newer timestamps

ComponentA hook observer 1665157525844
ComponentA hook observer 1665157525844
ComponentA hook observer 1665157525844

This will continue, every time I save ComponentA it seems to add another observer, which then gets triggered if I save somewhere else. Interestingly if I save ComponentA 10 times in a row before saving ComponentB, it only seems to add 1 more observer log.

Any idea what's happening?

App.tsx

import { enableLegendStateReact } from '@legendapp/state/react';
import React from 'react';
import ComponentA from './src/test/ComponentA';
import ComponentB from './src/test/ComponentB';

// Enable direct rendering of observables
enableLegendStateReact();

const App = () => {
  return (
    <>
      <ComponentA />
      <ComponentB />
    </>
  );
};

export default App;

ComponentA.tsx

import state from '../state';

const ComponentA = () => {
  useObserve(() => {
    console.log('ComponentA hook observer', state.settings.test.get());
  });
  return null;
};

export default ComponentA;

ComponentB.tsx

import {useEffect} from 'react';
import state from '../state';

const ComponentB = () => {
  useEffect(() => {
    state.settings.test.set(Date.now().toString());
  }, []);
  return null;
};

export default ComponentB;

state.ts

import settings from '../state/settings';
export default {settings, sites};

settings.ts

const settings = observable({
  test: undefined as string,
});

export default settings;

[jmeistrich]

I think this should be fixed in 0.19.3, but please let me know if it's still happening. Thanks for the report!

[alexstanbury]

Thanks, that was fast! Confirming it's fixed in 19.3 for the useObserve hook.

If I have an observe in ComponentA.tsx as follows:

import {observe} from '@legendapp/state';
import {useObserve} from '@legendapp/state/react';
import state from '../state';

const ComponentA = () => {
    useObserve(() => {
      console.log('ComponentA hook observer', state.settings.test.get());
    });
  return null;
};

observe(() => {
  console.log('ComponentA observe', state.settings.test.get());
});

export default ComponentA;

I get the duplicate issue again though.

[jmeistrich]

I think that actually makes sense since the observe is never cleaned up? I'm not an expert on all the intricacies of Fast Refresh though. Do you know of a way to fix that, to dispose it when the file refreshes?