Location of code for SDK loader

[tyange]

My company's project(SPA) is based on webpack, react, typescript and attempted to install Channel Talk. I installed channel-web-sdk-loader and put some code for SDK in App.tsx. I could see the channel-talk-button, and it worked, but I couldn't see the 'label button' that activated it. I left an inquiry with the Channel Talk team and received a reply asking me to wait.

While I was waiting, as an experiment, I moved the code related to the SDK into the app's root file, index.tsx(one level deeper than App.tsx). Then everything works correctly, I could see 'label button'.

Documentation does not properly explain where to place the code related to Channel Talk installation. Then I found an example from CodeSandbox left on the README.md of this repository. Below is part of the code for the example.

import { useEffect } from "react";
import * as ChannelService from "@channel.io/channel-web-sdk-loader";
import "./App.css";

function App() {
  useEffect(() => {
    ChannelService.loadScript();
    ChannelService.boot({
      /** try to test your channel */
      pluginKey: "833ec521-4443-4e92-b7c4-664c0399c871",
      customLauncherSelector: "#custom-launcher",
    });
  }, []);
  ...

Looking at the code above, App.tsx is loading and booting the SDK through useEffect. Also, based on the example project above, my company's project has SDK related code located in main.tsx. Is it standard for SDK related code to be located in App.tsx like the code above? Or does it matter if it is located on the main.tsx? If it is standard to be located on a App.tsx, is it necessary to use useEffect?