在 React Native 中不渲染 function 导出

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 (
      ...
  );
}