Skip to content

docs: Confusing React Documentation #146

@alex-vukov

Description

@alex-vukov

On which page do you see this issue?

https://flyonui.com/docs/framework-integrations/react/

Describe the issue

The examples on this page are very confusing. We have a mention of jQuery which is not supposed to be used together with React at all but what I really struggle to understand is the following snippet:

async function loadFlyonUI() {
  return import('flyonui/flyonui');
}

...

function App() {
  const location = useLocation();

  useEffect(() => {
    const initFlyonUI = async () => {
      await loadFlyonUI();
    };

    initFlyonUI();
  }, []);

  useEffect(() => {
    setTimeout(() => {
      if (
        window.HSStaticMethods &&
        typeof window.HSStaticMethods.autoInit === 'function'
      ) {
        window.HSStaticMethods.autoInit();
      }
    }, 100);
  }, [location.pathname]);

  return (
    ...
  );
}
}

What probably should be added as information:

  1. Why do we need to use a dynamic import for flyonui/flyonui inside a useEffect instead of a static import at the top of the file?
  2. Why do we need a second useEffect which runs an autoInit() method depending on the pathname? This makes no sense to me because in a SPA we usually initialize the app only once and not on every page change. I don't understand what the Flyonui components have to do with the route path.

Overall the examples in this page don't follow React best practices and feel weird to use so any clarifications would be better.

What browsers are you seeing the problem on?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions