Functions in UseEffect

Named functions §

This is better,

  useEffect(() => {
    const loadFile = async () => {
      const files = await getFile("demo", params.path, fileName);
      if (isNone(files)) return router.back();
      const blobUrl = URL.createObjectURL(files.value.blob);
      setFileUrl(`${blobUrl}#page=${page}`);
    };
 
    loadFile().then(() => setReady(true));
  }, []);

than this,

  useEffect(() => {
    (async () => {
      const files = await getFile('files', params.path, fileName);
      if (isNone(files)) return router.back()
      const blobUrl = URL.createObjectURL(files.value.blob) 
      setFileUrl(`${blobUrl}#page=${page}`);
      setReady(true);
    })();
  }, [])

because,

• Better naming instead of an anonymous IIFE (Immediately Invoked Function Expression), cleaner code and in case of an error the stack trace will have meaningful function name
• Cleaner to handle errors, a .catch() can be used after the .then()