Export without Render function in React Native

Question

In my React Native application, i am trying to add a component where i'll perform some config tasks but that component won't render anything. I have made the component already but when i import that on App.tsx the fucntion doesn't get called. How to import this following component properly to App.tsx. The component is given below:

var androidVersion = VersionInfo.appVersion;
var iosVersion = VersionInfo.buildVersion;

function usePrevious(value) {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
}

const Config = () => {
    console.log('check if get called >>',showVersionCodeStatus);
    const prevAmount = usePrevious(iosVersion);
    useEffect(() => {
        if(prevAmount.iosVersion !== iosVersion) {
         // process here
        }
        if(prevAmount.androidVersion !== androidVersion) {

            // process here
        }
    }, [iosVersion,androidVersion])
    // return {showVersionCodeStatus};
    
}

export default Config;

i'm importing the component in my App.tsx like the following:

import './config';

But it doesn't call the Config function. I have tried the following too:

import Config from './config';

That doesn't seem to work too. What am i doing wrong?

Answer 1

Since Config does not render anything, you should export it as a custom hook with a name such as useConfig. Subsequently you can import and use your custom hook in App.tsx, which will then run the config tasks specified in your useConfig custom hook.

useConfig.ts

var androidVersion = VersionInfo.appVersion;
var iosVersion = VersionInfo.buildVersion;

function usePrevious(value) {
   const ref = useRef();
   useEffect(() => {
     ref.current = value;
   });
   return ref.current;
}

const useConfig = () => {
   console.log('check if get called >>',showVersionCodeStatus);
   const prevAmount = usePrevious(iosVersion);
   useEffect(() => {
       if(prevAmount.iosVersion !== iosVersion) {
        // process here
       }
       if(prevAmount.androidVersion !== androidVersion) {

           // process here
       }
   }, [iosVersion,androidVersion])
   // return {showVersionCodeStatus};
   
}

export default useConfig;

App.tsx

import useConfig from "./useConfig";

export default function App() {
  const config = useConfig();
  return (
      ...
  );
}