Can I run a function after useMemo return is on the screen

Question

I'd like to get some kind of call back once memoizedTodos are displayed on the screen.

or execute handleOpen function once memoizedTodos are displayed on the screen.

Right now what I'm displaying on the screen is just the text. but you could imagine that this useMemo returns thousands of texts and images so it will take a while for those to be on the screen.

What I want to do here is run the handleOpen function after memoizedTodos returns are displayed like I can see all the todos visibly on the screen.

Are there any way that I can do this?

I thought I could use async/await to do this? or what would it be the best way to do this?

import React, { useMemo } from "react";
import "./styles.css";

export default function App() {

  const handleOpen = () => {
    console.log("this is running");
  };

   const memoizedTodos = useMemo(() => {
    return [...Array(n)].map((e, i) => <li key={i}>This is so many data</li>);
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <>{memoizedTodos}</>
    </div>
  );
}

You can't use async / await here. Why do you want to do that? — Konrad, Oct 20 '22 at 22:46
Okay I can't use async/await here. So technically I don't have to use async/await, but I need to execute the `handleOpen` after todos are on the screen. Do you know any ways to do this? — Happy1234, Oct 20 '22 at 22:53
They will be on the screen after first render. Why do you need to run this functions then? — Konrad, Oct 20 '22 at 22:55

score 1 · Answer 1 · answered Oct 20 '22 at 22:55

1

I'd like to get some kind of call back once memoizedTodos are displayed on the screen.

The callback you are looking for is actually useEffect with empty dependency array.

or execute handleOpen function once memoizedTodos are displayed on the screen.

useEffect will be invoked after the render, when memoizedTodos are already rendered.

The order: useMemo -> render -> useEffect

So all you actually need is:

useEffect(() => {
  console.log("this is running");
}, []);

answered Oct 20 '22 at 22:55

kind user

40,029
7
67
77

Do I need `memoizedTodos` in the dependency array? – Happy1234 Oct 20 '22 at 22:57
Sorry you said empty dependency array – Happy1234 Oct 20 '22 at 22:58
@tomo1234 Definitely not, you are not using`memoizedTodos` in the `useEffect` nor referring to it. – kind user Oct 20 '22 at 22:59
So the example above is a really small number of objects so displaying these on the screen won't take a while but imagine you have thousands of todos and want to wait until all of the todos are on the screen. Can I run a function after this happens? – Happy1234 Oct 20 '22 at 23:15
@tomo1234 Even if there's one million of todos it will still render before `useEffect`. – kind user Oct 20 '22 at 23:18
I think I used `render` the wrong way sorry for this. So I edited my questions but I'd like to wait until all of the todos are displaying on the screen like I can see all of them visibly and after that I like to run `handleOpen`. Do you think this is possible? – Happy1234 Oct 20 '22 at 23:24

score 0 · Answer 2 · answered Oct 20 '22 at 23:54

You can use useEffect with memoizedTodos as dependency like this

useEffect(()=>{
    console.log('this is a callbak')
  },[memoizedTodos])

every time your memoizedTodos change the useEffect will be executed
also the useEffect is execute after the render
render is produced by memoized change (you have your callback)

Can I run a function after useMemo return is on the screen

2 Answers2