React useMemo x is not a function

Question

I have a react app with hooks where I needed to replicate the behavior of componentWillMount. I read here that for this purpose useMemo could be used so my code roughly looks like this

const Component = ({
   some props,
    ...props
}) => {
  
    useEffect(() => {
       handleTranslations();
    }, []);

    useMemo(() => {
        // componentWillMount events
            handleCheckSession();
    }, []);
    const handleCheckSession = async() => {
        await props.checkSession();
        await handleWebNotificationsFetch();
    };

    const handleWebNotificationsFetch = async() => {
        some code here
    };

   const handleTranslations = () => {
   some code 
   };

In this case I can see an error in the console saying that handleCheckSession is not a function. If I move useMemo below the handleCheckSession declaration or invoke the methods (coming from props) directly inside the hook everything is ok. What is the reason for this behavior since useEffect has no problem finding and invoking handleTranslations or other functions declared below? Is this because useEffect is executed during rendering and useMemo before?

Does this answer your question? [How to use componentWillMount() in React Hooks?](https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks) — Valentin, Oct 21 '22 at 13:39
`useMemo` is not how you reproduce `componentWillMount`. `useEffect` is, as explained in the link. Regarding your error, you should show more code (your imports specifically). — Valentin, Oct 24 '22 at 06:49
Generally you are right, but I need that code executed at very early stage. https://wavez.github.io/react-hooks-lifecycle/ this is the reason I go with useMemo and it works perfectly. I tried with useEffect without any success. My question is why useEffect can access a function that is declared later on compared to useMemo which can't. — KiYa, Oct 24 '22 at 09:52
Oh okay, thanks for the link. I guess what happens is that `useMemo` is executed right away whereas `useEffect` is scheduled for execution and the variables which are captured by the effect callback are defined when it is executed. — Valentin, Oct 24 '22 at 10:20
This was also my assumption but I would love to see more detailed explanation. — KiYa, Oct 24 '22 at 10:24

score 1 · Answer 1 · answered Oct 21 '22 at 13:40

execute in other order the useMemo after the function handleCheckSession example:

 const handleCheckSession = async() => {
        await props.checkSession();
        await handleWebNotificationsFetch();
    };
useMemo(() => {
        // componentWillMount events
            handleCheckSession();
    }, []);

score 0 · Answer 2 · answered Mar 28 '23 at 16:05

0

in my case the error was caused because I was CALLING the function:

<div>{functionName()}</div>  = error, functionName is NOT a function

CHANGE TO:

<div>{functionName}</div> = works fine

so basically remove the () brackets, and it works

answered Mar 28 '23 at 16:05

fruitloaf

1,628
15
10

React useMemo x is not a function

2 Answers2