useLoading() conflicts with Fast Refresh

[JonnyBurger]

Demo code:

const font = useFont(require('./fonts/Roboto-Bold.ttf'), 64);

After saving the file again, font becomes null, because it uses useLoading and looking at it reveals why it happens:

const useLoading = <T>(
  source: Source,
  loader: () => Promise<T | null>,
  deps: DependencyList = []
) => {
  const [data, setData] = useState<T | null>(null);
  const prevSourceRef = useRef<Source>();
  useEffect(() => {
    if (prevSourceRef.current !== source) {
      prevSourceRef.current = source;
      loader().then(setData);
    } else {
      setData(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
  return data;
};

The setData(null) gets triggered, but this behavior does not seem intended.

[wcandillon]

I wasn't able to reproduce the issue by logging the following:

    console.log({ previous: prevSourceRef.current, current: source });

Do you see something in the implementation that is likely to make it faulty?

It seems like you might be using these in Remotion? It would be discouraged to not load these upfront: https://github.com/wcandillon/remotion-skia-tutorial/blob/main/src/components/RemotionCanvas.tsx

Btw speaking of Remotion integration like the automatic webpack config, maybe a boilerplate Canvas could be good (to load assets, do remotion context injection and so on).

[JonnyBurger]

A repro is here: https://github.com/remotion-dev/template-skia

It can be cloned and run, then when the text changes, it disappears.

There is a SkiaCanvas component in @remotion/skia which does wrap Remotion contexts, though it does not load assets and cache them. We can add that if you recommend it, though the docs currently recommend to load the fonts like this: https://shopify.github.io/react-native-skia/docs/text/fonts

Do you see something in the implementation that is likely to make it faulty?

Yes, I think I found it, gonna send a PR in a moment!