useMemo reruns when the dependencies not changed when memoised value is a fn about react

[PradeepNedun]

I am sorry for that, try now
https://codesandbox.io/p/sandbox/react-dev-forked-8whdhd?file=%2Fsrc%2FTodoList.js&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltzulzzm00073b6hrbfulewd%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltzulzzm00033b6hhfkxfr0h%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltzulzzm00043b6h9n965srz%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltzulzzm00063b6hs3v0n4os%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B43.170419378935016%252C56.829580621064984%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltzulzzm00033b6hhfkxfr0h%2522%253A%257B%2522id%2522%253A%2522cltzulzzm00033b6hhfkxfr0h%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltzus0z1006i3b6h8fpbgr8j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FTodoList.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltzus0z1006i3b6h8fpbgr8j%2522%257D%252C%2522cltzulzzm00063b6hs3v0n4os%2522%253A%257B%2522id%2522%253A%2522cltzulzzm00063b6hs3v0n4os%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltzulzzm00053b6hdn6554xj%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltzulzzm00053b6hdn6554xj%2522%257D%252C%2522cltzulzzm00043b6h9n965srz%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltzulzzm00043b6h9n965srz%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[pwbriggs]

Hey there @PradeepNedun! 👋

I can't access the sandbox you linked to. Did you forget to set it to be publicly viewable?

Thanks! ❤️

[rickhanlonii]

@PradeepNedun I don't see anything wrong here. the memo re-render log only fires when the dependencies of the useMemo changes (specifically only when the tab changes, since todos is created once in the module scope and never updated.

The memo value log fires any time the TodoList component renders (including when changing the theme) but that's because you're calling that function in render. So of course, if you call a function in render, then that function is called whenever the component renders.

To fix, you filter the todos and return them from useMemodirectly, instead of returning a function:

const filteredTodos = useMemo(() => {
  console.log('memo')
  return filterTodos(todos, tab);
}, [todos, tab]);
  
// ...
filteredTodos.map((todo) => <div> ...</div>);

With this, the expensive filterTodos function will only run when either the todos or tab values change.

from react.