How to return data from a React Functional Component

Question

I would like to return data in the form of a String, JSON object or integer, or any other data other a JSX component, but without breaking the Rules of Hooks. Is there a way to do this in React?

I need to go about it this way since I need access to React Hooks.

import {} from 'react-native';

import React, {useEffect} from 'react';

export function revGetUserEntities({revCallbackFunction}) {
  let myData;

  useEffect(() => {
    // Set myData here, or do something with it before returning;
  }, []);

  return myData;
}

Thank you all in advance.

Answer 1

Create a custom hook a common practice is use the word use before the name of your function i would recommend to rename function to useRevGetUserEntities

import {} from 'react-native';
    
    import React, {useEffect} from 'react';
    
    export function useRevGetUserEntities({revCallbackFunction}) {
     // let myDate; this will be undefined on rerender. use state
const [myDate,SetMyDate] =React.useState(null);

    
      useEffect(() => {
        // Set myData here, or do something with it before returning;
SetMyDate(your value)
      }, []);
    
      return [myData];
    }

now you can reuse it in any other function without losing state or value on rerender note you can also pass a callback function in hooks

const [myData] = useRevGetUserEntities((callbackValue)=>{
// revCallbackFunction from useRevGetUserEntities function will be 
})

Edit you can also watch for myData change in parent Observe changes this will enter code here fire once myData value changes in Parent function

React.useEffect(()=>{
if(myData !== null){

}
},[myData]